html5 jpeg,HTML5画布，保存jpeg blob并从blob恢复到画布(HTML5 canvas, save jpeg blob and restore to canvas from bl...

HTML5画布，保存jpeg blob并从blob恢复到画布(HTML5 canvas, save jpeg blob and restore to canvas from blob)

我有一个包含图像的画布#mycanvas 。 我想从该图像中创建一个blob，最好是作为jpeg。 这是我如何创建blob

document.getElementById('mycanvas').toDataURL("image/jpeg").replace(/^data:image\/(png|jpeg);base64,/, "")

如何从此blob重新创建图像，并再次在#mycanvas显示它？

I have a canvas #mycanvas which contains an image. I want to create a blob out of that image, preferably as a jpeg. Here is how i create the blob

document.getElementById('mycanvas').toDataURL("image/jpeg").replace(/^data:image\/(png|jpeg);base64,/, "")

How do i recreate the image from this blob, and show it in #mycanvas again?

原文：https://stackoverflow.com/questions/18419246

更新时间：2020-08-12 15:08

最满意答案

这是我如何解决我的问题

function blob2canvas(canvas,blob){

var img = new Img;

var ctx = canvas.getContext('2d');

img.onload = function () {

ctx.drawImage(img,0,0);

}

img.src = blob;

}

调用canvas.toDataURL("image/jpeg")时收到blob

Here's how i solved my problem

function blob2canvas(canvas,blob){

var img = new Img;

var ctx = canvas.getContext('2d');

img.onload = function () {

ctx.drawImage(img,0,0);

}

img.src = blob;

}

The blob was received when calling canvas.toDataURL("image/jpeg")

相关问答

toBlob方法是异步的，需要两个参数，回调函数和图像类型(可选第三个参数用于质量)： void canvas.toBlob(callback，type，encoderOptions); 例 if (typeof canvas.toBlob !== "undefined") {

canvas.toBlob(function(blob) {

// send the blob to server etc.

...

}, "image/jpeg", 0.75);

}

el

...

取消我们刚做的事情有什么意义呢？ 虽然你不是。 如果你只是说出这些话，听起来就像是可能发生的事情，但事实并非如此。 像这样想： 您想要在同一个onDraw(Canvas)调用中应用一系列非常复杂的翻译和旋转。 现在，由于您应用于“ Canvas每次翻译/旋转都是按顺序进行的，因此您必须撤消上次对Canvas调整，或者在绘制任何要绘制的Canvas以某种方式计算基于上一次调整的新调整。 这很快就会变得非常混乱。 使用canvas.save()和canvas.restore()是简化这个过程的简单方法

...

您的类abc View用于布局中的某些位置，您可以轻松拍摄其屏幕截图。 Abc abc;

Bitmap bmp = viewToBitmap(abc);

Bitmap bmp = viewToBitmap(frameLayout);

Bitmap bmp = viewToBitmap(LinearLayout);

Bitmap bmp = viewToBitmap(AnyView);

public Bitmap viewToBitmap(View view) {

Bitmap

...

通过大量的试验和努力，不使用第三方，这里的答案也是有效的： $('#a').click(save);

function save(ev) {

$('#canvas')[0].toBlob((blob) => {

let URLObj = window.URL || window.webkitURL;

let a = document.createElement("a");

a.href = URLObj.createObjectURL(b

...

我认为有一些方法... 在点击发布后重新绘制所有内容 这很简单，但不是很有效。 只重绘修改过的部分 具有9个参数的drawImage只重绘改变的背景图像部分，然后重新绘制黑色文本。 点击之前保存图像数据然后恢复 这使用了2D上下文的getImageData和putImageData。 (不确定它是否被广泛实现。) 这里的规范： ImageData getImageData(in double sx, in double sy, in double sw, in double sh);

void p

...

存储很容易。 假设你有一个带有BLOB字段的mysql表用于图片.... 上传图像后，将文件内容存入内存，然后插入blob字段。 <?php

$file = '/tmp/MyImg.jpg';

// you migh want to escape it just in case

$data = file_get_contents($file);

// Insert into database

$sql = "INSERT INTO my_picture_table (`pictu

...

尝试以下建议： 改变自： $config['source_image'] = "uploads/" .$filename; 至： $config['source_image'] = "./uploads/" .$filename; Try below suggestion: Change from: $config['source_image'] = "uploads/" .$filename; To: $config['source_image'] = "./uploads/" .$filena

...

将Blob URL设置为img src而不是Blob let blobURL = URL.createObjectURL(blob);

rimage.src = blobURL;

当不再需要对Blob URL的引用时，可以按照过程撤销Blob URL URL.revokeObjectURL(blobURL);

Set a Blob URL as img src instead of a Blob let blobURL = URL.createObjectURL(blob);

rimage.s

...

这是我如何解决我的问题 function blob2canvas(canvas,blob){

var img = new Img;

var ctx = canvas.getContext('2d');

img.onload = function () {

ctx.drawImage(img,0,0);

}

img.src = blob;

}

调用canvas.toDataURL("image/jpeg")时收到blob Here's how

...

这应该解决它。 function drawLine(context, x1, y1, x2, y2) {

context.save();

context.translate(x1, y1);

context.beginPath(); //

...