缩略图-html=>cavas=>base64 =>file文件
2021-11-29 本文已影响0人
Raral
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script src="./html2canvas.min.js"></script>
<style>
.appStyle {
width: 200px;
height: 100px;
/* background-image: url("./dikou.png"); */
/* background-image: url("https://test-cos.gomezhe.com/fs-res/public/common/0387902551904e95a3ec54dfec338e8f.jpg"); */
background-color: #f00;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center center;
}
.txt {
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<div class="appStyle" ref="appStyle">
<p class="txt">{{msg}}</p>
</div>
<button @click="htmlToCanvas">将html生成缩略图</button>
<div class="preview">
<img :src="preBase64" alt="">
</div>
<br>
<input type="file" name="thumbnail" @change="uploadHandle">
</div>
</body>
<script>
let app = new Vue({
el:"#app",
data: {
msg:"test-折扣信息",
preBase64:"",
baseFile: null,//通过base64转成file对象
uploadFile: null//通过真实上传 的file对象
},
created() {
},
methods:{
htmlToCanvas() {
let _this = this;
let nodeEle = document.querySelector(".appStyle");
let options = {width:200,height:100,allowTaint: true,useCORS:true}
html2canvas(nodeEle,options).then(canvas => {
debugger;
console.log(canvas);//<canvas width="200" height="100"></canvas>
console.dir(canvas);
//展示缩略图
// document.querySelector(".preview").appendChild(canvas);
//将缩略图转换成功文件格式 base64
let base64 = canvas.toDataURL("image/png");
console.log(base64);
_this.preBase64 = base64;
let file = _this.base64ToFile(_this.preBase64, "thumbnail");
console.log(file);
// console.log(blogData);//
/**
* lastModified: 1638178518963
lastModifiedDate: Mon Nov 29 2021 17:35:18 GMT+0800 (中国标准时间) {}
name: "thumbnail"
size: 1576
type: "image/png"
webkitRelativePath: ""
*
*/
})
},
base64ToFile(dataurl, fileName) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], fileName, {
type: mime
});
},
uploadHandle(e) {
console.dir(e.target)
/**
* lastModified: 1638178518963
lastModifiedDate: Mon Nov 29 2021 17:35:18 GMT+0800 (中国标准时间) {}
name: "thumbnail"
size: 1576
type: "image/png"
webkitRelativePath: ""
*
*/
// console.lo
}
}
})
//index.html:59 Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.?
//https://blog.csdn.net/weixin_30625691/article/details/95545232
</script>
</html>
file对象
e775a0d59f30e43667293421dc2d3f2.png
