[英]Canvas to img with src blob
I'm creating a PNG file from a canvas, but before I want to display the canvas as an img element, using a blob as the src of the img.我正在从画布创建一个 PNG 文件,但在我想将画布显示为 img 元素之前,使用 blob 作为 img 的 src。 What I tried so far:
到目前为止我尝试过的:
canvas = document.getElementById("canvas");
//Get data from canvas
img_b64 = canvas.toDataURL('image/png');
//Create PNG
png = img_b64.split(',')[1];
//Create new img
img = document.createElement("img");
img.src = img_b64;
//Append img to document
//Save png
This works, but instead of img_b64
I want a blob to be the src of the img, like this:这有效,但我想要一个 blob 作为 img 的 src,而不是
img_b64
,如下所示:
//Create blob from new PNG
blob = new Blob([window.atob(png)], { type: 'image/png', encoding: 'utf-8' });
//Create new img with blob as src
img = document.createElement("img");
img.src = URL.createObjectURL(blob);
//Append img to document
//Save png
The above code only shows me an empty img.上面的代码只显示了一个空的 img。 Is there a way to do this or do I have to create the png file first and afterwards create a blob for it?
有没有办法做到这一点,还是我必须先创建 png 文件,然后再为它创建一个 blob?
I just found an solution using the answer to this question: Convert Data URI to File then append to FormData .我刚刚使用这个问题的答案找到了一个解决方案: Convert Data URI to File then append to FormData 。 Using the
dataURItoBlob
function my code is:使用
dataURItoBlob
函数我的代码是:
canvas = document.getElementById("canvas");
//Get data from canvas
img_b64 = canvas.toDataURL('image/png');
//Create blob from DataURL
blob = dataURItoBlob(img_b64)
img = document.createElement("img");
img.src = URL.createObjectURL(blob);
//Insert image
dataURItoBlob function: dataURItoBlob 函数:
function dataURItoBlob(dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0)
byteString = atob(dataURI.split(',')[1]);
else
byteString = unescape(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to a typed array
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {type:mimeString});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.