编程开源技术交流，分享技术与知识

网站首页 > 开源技术正文

js canvas调整图片大小（设置canvas大小）

wxchong 2024-08-22 03:34:14 开源技术 12 ℃ 0 评论

<body>

</body>

function resize_image( src, dst, type, quality ) {

var tmp = new Image(),

canvas, context, cW, cH;

type = type || 'image/jpeg';

quality = quality || 0.92;

cW = src.naturalWidth;

cH = src.naturalHeight;

tmp.src = src.src;

tmp.onload = function() {

canvas = document.createElement( 'canvas' );

cW /= 2;

cH /= 2;

if ( cW < src.width ) cW = src.width;

if ( cH < src.height ) cH = src.height;

canvas.width = cW;

canvas.height = cH;

context = canvas.getContext( '2d' );

context.drawImage( tmp, 0, 0, cW, cH );

dst.src = canvas.toDataURL( type, quality );

if ( cW <= src.width || cH <= src.height )

return;

tmp.src = dst.src;

}

base = document.getElementById("base");

res = document.getElementById("resize1");

window.onload = resize_image(base, res, "image/jpg", 0.5);

</script>