码迷,mamicode.com
首页 > Web开发 > 详细

html to blob

时间:2020-04-02 01:09:27      阅读:67      评论:0      收藏:0      [点我收藏+]

标签:utf-8   tps   img   png   his   xmlhttp   send   document   style   

<!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

标签:utf-8   tps   img   png   his   xmlhttp   send   document   style   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!