您的位置：首页 > 其它

canvas 转换加压缩base64编码图片

2018-03-10 14:20 429 查看

<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head>
<input index="0" name="ss" onchange="fileUpload(this.files[0],this)" type="file"><input index="1" onchange="fileUpload(this.files[0],this)" type="file"><img class="upFileImg" alt="" style="width:400px;height:400px;border:1px solid red;">
<body> <script>
function fileUpload(file, elem) { var maxLen = 300; var img = new Image(); var indexS = elem.getAttribute("index");//获取索引 var upFileImg = document.querySelectorAll(".upFileImg"); var reader = new FileReader();//读取客户端上的文件 reader.onload = function () { var url = reader.result;//读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的.所以必须使用reader.onload， img.src = url;//reader读取的文件内容是base64,利用这个url就能实现上传前预览图片 }; img.onloa
4000
d = function () { //生成比例 var width = img.width, height = img.height; //计算缩放比例 var rate = 1; if (width >= height) { if (width > maxLen) { rate = maxLen / width; } } else { if (height > maxLen) { rate = maxLen / height; } }; img.width = width * rate; img.height = height * rate; //生成canvas var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0, img.width, img.height); var base64 = canvas.toDataURL('image/jpeg', 0.9); upFileImg[indexS].src = base64; console.log(base64) }; reader.readAsDataURL(file); }
</script></body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航