前端图片canvas、file、blob、DataURL格式转换

2024-01-14 14:34:45

一、图片转换为canvas

图片转换为canvas可以通过HTML5的drawImage()方法实现。该方法接受两个参数：要绘制的图片对象和要绘制到的canvas元素。

var img = new Image();
img.onload = function() {
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
};
img.src = "image.jpg";

二、canvas转换为图片

canvas转换为图片可以通过HTML5的toDataURL()方法实现。该方法返回一个包含图片数据的Base64字符串。

var canvas = document.getElementById("myCanvas");
var dataURL = canvas.toDataURL();

三、file转换为canvas

file转换为canvas可以通过HTML5的FileReader对象实现。FileReader对象可以读取文件并将其内容转换为字符串或ArrayBuffer。

var file = document.getElementById("myFile").files[0];
var reader = new FileReader();
reader.onload = function() {
  var img = new Image();
  img.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
  };
  img.src = reader.result;
};
reader.readAsDataURL(file);

四、canvas转换为file

canvas转换为file可以通过HTML5的toBlob()方法实现。该方法返回一个包含图片数据的Blob对象。

var canvas = document.getElementById("myCanvas");
canvas.toBlob(function(blob) {
  var file = new File([blob], "image.jpg");
});

五、blob转换为DataURL

blob转换为DataURL可以通过HTML5的FileReader对象实现。FileReader对象可以读取文件并将其内容转换为字符串或ArrayBuffer。

var blob = new Blob([""], {type: "image/jpeg"});
var reader = new FileReader();
reader.onload = function() {
  var dataURL = reader.result;
};
reader.readAsDataURL(blob);

六、DataURL转换为canvas

DataURL转换为canvas可以通过HTML5的Image对象实现。Image对象可以加载图片并将其显示在canvas元素中。

var img = new Image();
img.onload = function() {
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
};
img.src = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD..."