图片转base64位（通过画布）

 

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) {

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路径