将图像从数据URL绘制到画布

小编典典

将图像从数据URL绘制到画布

html

如何在“画布”中打开图像？被编码

我正在使用

var strDataURI = oCanvas.toDataURL();

输出是已编码的base 64图像。如何在画布上绘制此图像？

我要使用strDataURI 并创建图片吗？可能吗？
如果不是，那么将图像加载到画布上的解决方案可能是什么？

阅读 370

2020-05-10

共1个答案

小编典典

给定一个数据URL，您可以通过将图像的设置为数据URL来创建图像（在页面上或仅在JS中）src。例如：

var img = new Image;
img.src = strDataURI;

HTML5 Canvas Context 的drawImage()方法使您可以将图像（或画布或视频）的全部或部分复制到画布上。

您可以这样使用它：

var myCanvas = document.getElementById('my_canvas_id');
var ctx = myCanvas.getContext('2d');
var img = new Image;
img.onload = function(){
  ctx.drawImage(img,0,0); // Or at whatever offset you like
};
img.src = strDataURI;

2020-05-10