首页 > Web开发 > 详细

html to blob

时间:2020-04-02 00:46:53      阅读:81      评论:0      收藏:0      [点我收藏+]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>nick getBase64</title>
</head>
<body>
<div>
<canvas id="canvas" style="display: none"></canvas>
<img id="canvasImg" />
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var img = new Image();


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

function getImageBlob (url, cb) {
var xhr = new XMLHttpRequest();
xhr.open(‘get‘, url, true);
xhr.responseType = ‘blob‘;
xhr.onload = function () {
if (this.status == 200) {
console.log(this.response)
img.src = URL.createObjectURL(this.response);
}
};
xhr.send();
}

img.onload = function () {
canvas.width = img.width;
canvas.height = img.height + 200;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
document.getElementById(‘canvasImg‘).src = canvas.toDataURL("image/jpeg", 1);
}


getImageBlob(‘https://msb-ai.meixiu.mobi/ai-pm/static/touxiang.png‘);

</script>
</body>
</html>

参考:https://segmentfault.com/a/1190000014478087

html to blob

原文:https://www.cnblogs.com/adolfvicto/p/12616895.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!