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

小开

在 javascript 中，使用 jquery 来选择画布 ID:

 var Canvas2 = $("#canvas2")[0];
var Context2 = Canvas2.getContext("2d");
var image = new Image();
image.src = "images/eye.jpg";
Context2.drawImage(image, 0, 0);

Html5:

<canvas id="canvas2"></canvas>

小开

最佳答案

给定一个数据 URL，您可以通过将图像的 src设置为数据 URL 来创建图像(在页面上或者纯粹在 JS 中)。例如:

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;

编辑 : 我之前在这个空间中建议，当涉及到数据 URI 时，可能不需要使用 onload处理程序。根据这个问题的实验测试，这样做是不安全的。上面的顺序ーー创建图像，设置 onload来使用新图像，而那么设置 srcーー对于某些浏览器来说是必要的，以确保使用结果。

小开

也许这个小提琴可以帮助大拇指，小提琴它使用文件 API 和画布动态生成图像的缩略图。

(function (doc) {
var oError = null;
var oFileIn = doc.getElementById('fileIn');
var oFileReader = new FileReader();
var oImage = new Image();
oFileIn.addEventListener('change', function () {
var oFile = this.files[0];
var oLogInfo = doc.getElementById('logInfo');
var rFltr = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i
try {
if (rFltr.test(oFile.type)) {
oFileReader.readAsDataURL(oFile);
oLogInfo.setAttribute('class', 'message info');
throw 'Preview for ' + oFile.name;
} else {
oLogInfo.setAttribute('class', 'message error');
throw oFile.name + ' is not a valid image';
}
} catch (err) {
if (oError) {
oLogInfo.removeChild(oError);
oError = null;
$('#logInfo').fadeOut();
$('#imgThumb').fadeOut();
}
oError = doc.createTextNode(err);
oLogInfo.appendChild(oError);
$('#logInfo').fadeIn();
}
}, false);
oFileReader.addEventListener('load', function (e) {
oImage.src = e.target.result;
}, false);
oImage.addEventListener('load', function () {
if (oCanvas) {
oCanvas = null;
oContext = null;
$('#imgThumb').fadeOut();
}
var oCanvas = doc.getElementById('imgThumb');
var oContext = oCanvas.getContext('2d');
var nWidth = (this.width > 500) ? this.width / 4 : this.width;
var nHeight = (this.height > 500) ? this.height / 4 : this.height;
oCanvas.setAttribute('width', nWidth);
oCanvas.setAttribute('height', nHeight);
oContext.drawImage(this, 0, 0, nWidth, nHeight);
$('#imgThumb').fadeIn();
}, false);
})(document);

小开

function drawDataURIOnCanvas(strDataURI, canvas) {
"use strict";
var img = new window.Image();
img.addEventListener("load", function () {
canvas.getContext("2d").drawImage(img, 0, 0);
});
img.setAttribute("src", strDataURI);
}

小开

在设置新的 Image 之前，您可能需要清除旧的 Image。

您还需要更新新图像的画布大小。

这就是我在我的项目中所做的:

    // on image load update Canvas Image
this.image.onload = () => {


// Clear Old Image and Reset Bounds
canvasContext.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.canvas.height = this.image.height;
this.canvas.width = this.image.width;


// Redraw Image
canvasContext.drawImage(
this.image,
0,
0,
this.image.width,
this.image.height
);
};

小开

如果您不喜欢 onload回调方法，您可以这样“承诺”它:

let url = "data:image/gif;base64,R0lGODl...";
let img = new Image();
await new Promise(r => img.onload=r, img.src=url);
// now do something with img

小开

混合我的答案。

function drawDataURIOnCanvas(strDataURI, canvas) {
var img = new window.Image();
img.addEventListener("load", function () {
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext("2d").drawImage(img, 0, 0, img.width, img.height);
});


img.setAttribute("src", strDataURI);
}