<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<!--?import?CSS?-->
????<link?rel="stylesheet"?)
????????????????//?創(chuàng)建新的圖片對(duì)象?
????????????????let?img?=?new?Image()
????????????????//?指定圖片的DataURL(圖片的base64編碼數(shù)據(jù))
????????????????img.src?=?file.content
????????????????//?監(jiān)聽瀏覽器加載圖片完成，然后進(jìn)行進(jìn)行繪制
????????????????img.onload?=?()?=>?{
????????????????????canvas.width?=?400
????????????????????canvas.height?=?300
????????????????????context.drawImage(img,?0,?0,?400,?300)
????????????????????this.img=file.content?=?canvas.toDataURL(file.file.type,?0.92)?//?0.92為默認(rèn)壓縮質(zhì)量
????????????????????let?files?=?this.dataURLtoFile(file.content,?file.file.name)
????????????????????console.log(files);
????????????????}
????????????}
????????}
????})
</script>
</html>
