二进制图片blob数据转canvas

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

javascript是有操作二进制文件的方法的，在这里就不详述了。

而AJAX的核心XMLHttpRequest也可以获取服务端给的二进制Blob。

可以参考：

XMLHttpRequest Level 2 使用指南

Blob - MDN

FileReader - MDN

代码还是基于上一篇文章的demo。二进制就用canvas转的blob数据模拟一下。

思路很简单，blob转image，image再转canvas。（image是base64的）

$("#getCroppedCanvas").on("click", function () {
console.log($('#image').cropper('getCroppedCanvas'));;
var cas=$('#image').cropper('getCroppedCanvas');
var base64url=cas.toDataURL('image/jpeg'); // new
cas.toBlob(function (e) {
console.log(e); //生成Blob的图片格式
const reader = new FileReader()
reader.readAsDataURL(e)
reader.onload = function(e){
console.log("reader")
console.log(e.target.result)
let img = new Image()
img.src = e.target.result
img.id = "abc"
img.style.display = "none"
document.body.appendChild(img)
img.onload = function () {
console.log("img")
// console.log(this)
console.log(this.width)
console.log(this.height)
console.log(this.naturalWidth)
console.log(this.naturalHeight)
let canvas = document.createElement("canvas")
canvas.width = this.width
canvas.height = this.height
let ctx = canvas.getContext("2d")
ctx.drawImage(this, 0, 0)
document.body.removeChild(img)
document.body.appendChild(canvas)
}
}
})
})

注意//new注释下面的部分。

这段代码有三层回调：canvas.toBlob()、new FileReader().onload()、image.onload()。

image回调的目的是获取图片正确的宽高，赋值给canvas。canvas有默认宽高，放着不管的话会拉伸图片。

值得注意的是：CanvasRenderingContext2D.drawImage()方法的第一个参数是不支持base64图片流的，这一点MDN的文档说明了。

image 绘制到上下文的元素。

允许任何的 canvas 图像源(CanvasImageSource)，例如：CSSImageValue，HTMLImageElement，SVGImageElement，HTMLVideoElement，HTMLCanvasElement，ImageBitmap 或者OffscreenCanvas。

——CanvasRenderingContext2D.drawImage() - MDN

参考：CanvasRenderingContext2D.drawImage() - MDN

最后， CanvasRenderingContext2D.drawImage()方法其实隐藏着一个大坑：使用不同的参数，参数的顺序是不一样的。

void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

我曾经被这个方法折腾的百思不得其解，看了MDN注意到这个坑爹的细节。

以上。