图片转base64位（通过画布）

最新推荐文章于 2023-12-21 15:55:37 发布

原创最新推荐文章于 2023-12-21 15:55:37 发布 · 592 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#base64 #html #canvas #javascript

html 同时被 2 个专栏收录

2 篇文章

订阅专栏

javascript

2 篇文章

订阅专栏

本文介绍了一种使用HTML5 Canvas API来处理图片的方法。通过创建canvas元素，并利用其getContext方法获取绘图上下文，可以实现图片的加载、缩放及格式转换等功能。文中详细解释了如何根据图片原始尺寸调整canvas大小，确保图片按比例缩放并在canvas上正确绘制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var img = new Image();

img.src = url ;

img.onload=function(){

//创建canvas画布

var canvas = document.createElement("canvas");

//在css中不要直接给img设置宽高,否则此处会获取到css设置的值

var width = img.width;

var height = img.height;

//比较图片宽高设置图片显示和canvas画布尺寸

if (width > height) {

imgClass = 'height';

if (width > 500) {

height = Math.round(height *= 500 / width);

width = 500;

}

} else {

imgClass = 'width';

if (height > 500) {

width = Math.round(width *= 500 / height);

height = 500;

}

}

canvas.width = width; //设置新的图片的宽度

canvas.height = height; //设置新的图片的长度

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

ctx.drawImage(img, 0, 0, width, height); //绘图

var dataURL = canvas.toDataURL("image/png", 0.8); //供img标签使用的src路径

var img = new Image();

img.src = url ;

img.οnlοad=function(){

//创建canvas画布

var canvas = document.createElement("canvas");

//在css中不要直接给img设置宽高,否则此处会获取到css设置的值

var width = img.width;

var height = img.height;

//比较图片宽高设置图片显示和canvas画布尺寸

if (width > height) {

imgClass = 'height';

if (width > 500) {