Html 将图像从数据 URL 绘制到画布
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4773966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drawing an image from a data URL to a canvas
提问by Yahoo
How can i open an image in a Canvas ? which is encoded
如何在 Canvas 中打开图像？这是编码
I am using the
我正在使用
var strDataURI = oCanvas.toDataURL();
The output is the encoded base 64 image. How can i draw this image on a canvas?
输出是编码的 base 64 图像。如何在画布上绘制此图像？
I want to use the strDataURIand create the Image ? Is it poosible ?
If its not then what possibly can be the solution for loading the image on a canvas ?
我想使用strDataURI并创建图像？是否可行？
如果不是，那么在画布上加载图像的解决方案可能是什么？
回答by Phrogz
Given a data URL, you can create an image (either on the page or purely in JS) by setting the srcof the image to your data URL. For example:
给定数据 URL，您可以通过将图像的 设置为数据 URL 来创建图像（在页面上或纯 JS 中）src。例如：
var img = new Image;
img.src = strDataURI;
The drawImage()methodof HTML5 Canvas Context lets you copy all or a portion of an image (or canvas, or video) onto a canvas.
HTML5 Canvas Context的drawImage()方法允许您将图像（或画布或视频）的全部或部分复制到画布上。
You might use it like so:
你可以这样使用它：
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;
Edit: I previously suggested in this space that it might not be necessary to use the onloadhandler when a data URI is involved. Based on experimental tests from this question, it is not safe to do so. The above sequence—create the image, set the onloadto use the new image, and thenset the src—is necessary for some browsers to surely use the results.
编辑：我之前在此空间中建议，onload当涉及数据 URI 时，可能不需要使用处理程序。根据这个问题的实验测试，这样做是不安全的。上面的顺序——创建图像，设置onload使用新图像，然后设置src——对于某些浏览器肯定使用结果是必要的。
回答by Raphael C
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);
}
回答by Raphael C
Perhaps this fiddle would help ThumbGen - jsFiddleIt uses File API and Canvas to dynamically generate thumbnails of images.
也许这个小提琴会帮助ThumbGen - jsFiddle它使用文件 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);
回答by Hitesh Sahu
You might wanna clear the old Image before setting a new Image.
您可能想在设置新图像之前清除旧图像。
You also need to update the Canvas size for a new Image.
您还需要更新新图像的画布大小。
This is how I am doing in my project:
这就是我在我的项目中所做的：
// 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
);
};
回答by user475434
in javascript , using jquery for canvas id selection :
在 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:
html5：
<canvas id="canvas2"></canvas>
