Question

1）我有base64图像数据，这个图像用作画布内的图像。稍后我将其作为base64检索回来，将其发送到另一个服务并创建一个图像（存储为存储中的图像文件）。

2）在另一个页面中，我将此图像加载为base64，在画布内绘制。所有渲染部分看起来都很好并且工作得很好。

但是，Uint8ClampedArray否（1）与否（2）不同。或者这是预期的行为？这是我的代码：

/** first part **/
var img = new Image();
img.src = 'data:image/jpeg;base64,' + data.result;
// wait for image finish load
// then draw image into canvas
img.onload = function () {
    // draw cover image into canvas
    // ctx is just canvas context
    ctx.drawImage( img, 0, 0 );
    // clampedArray is just a normal variable
    clampedArray = ctx.getImageData( 0, 0, canvas.height, canvas.width );
    console.log(clampedArray.data); //<----------------------- (1)
    var base64Image = secret.toDataURL( 'image/jpeg' );
    // sending base64Image to another services
}

/** second part/another page **/
var img = new Image();
img.src = 'data:image/jpeg;base64,' + data.result;
img.onload = function () {
   ctx.drawImage( img, 0, 0 );             
   clampedArray  = ctx.getImageData( 0, 0, coverAfter.height,coverAfter.width );
   console.log(clampedArray.data); //<----------------------- (2)
}

data.result返回相同的base64，但当console.log同时使用（1）和（2）时，我得到了不同的结果（Uint8ClampedArray）

Answer 1

我猜测两个base64字符串不相等。当您运行secret.toDataURL('image/jpeg')时，您会重新编码原始jpeg图像，(most likely)会稍微更改图像。因此，base64Image与原始data.result不同。

从画布

1 个答案: