Download and install html2canvas
Method 1, https://www.bootcdn.cn/ CDN website to download the html2canvas plug-in
Download it here and place it under the test project directory common.
introduced in the page
Method 2: Install html2canvas via npm
1. Download via npm
npm i html2canvas
2. Introduce html2canvas
import html2canvas from 'html2canvas'
3. The uni-app framework introduces html2canvas plug-in resources
Originally, the app side could not use html2canvas because the app side did not support browser js.
But I saw renderjs in uniapp. Using this can help us use browser objects in the app. In this way, html2canvas can be implemented.
renderjs
renderjs is a js that runs in the view layer. It is more powerful than WXS. It only supports app-vue and h5.
There are two main functions of renderjs:
Significantly reduces the communication loss between the logic layer and the view layer, and provides high-performance view interaction capabilities.
Operate DOM in the view layer, and run the js library
renderjs for web. Note that it can only be used on the app side and h5 side.
<script module="canvas" lang="renderjs">
import html2canvas from "@/static/html2canvas";
export default {
data(){
return {
}
},
methods: {
createPoster(event, ownerInstance) {
// 生成海报
const domObj = document.getElementById("posterHtml");
html2canvas(domObj, {
useCORS: true,
logging: false,
letterRendering: true,
proxy: "http://oss.licai521.com/",
allowTaint:true,
onclone(doc) {
let e = doc.querySelector("#posterHtml");
e.style.display = "block";
},
}).then(function (canvas) {
var posterImg = canvas.toDataURL("image/png",0.7);
ownerInstance.callMethod('creates', {
posterImg: posterImg
})
}).catch(err => {
console.log(err)
})
},
},
}
}
</script>
<script>
export default {
data() {
return {
posterImg: "", // 最终生成的海报图片
};
},
methods: {
creates(option){
//这里就接收到了图片的路径。直接就可以拿到页面dom上去渲染了。
console.log(option.posterImg)
this.posterImg=option.posterImg
},
}
}
</script>
Click event
//这个canvas就是你<script module="canvas" lang="renderjs">这个script标签上的module module可以自己随便定义。两个对应起来就好
<div class="share-item" @click="canvas.createPoster"></div>
Pitfalls encountered by html2canvas
: The spacing between the top and bottom of the image text is incorrect:
reduce the version of html2canvas; the
error The operation is insecure is reported on ios.
This error was reported for a long time. At first I thought it was because Apple's browser did not support this plug-in, but
later I found out that it was a cross-domain problem with the image.
It will be ok to solve the problem of cross-domain images
Errors encountered
1. Solution to cross-domain problem of canvas picture drawing. Tainted canvases may not be exported.
The reason is that cross-domain pictures are used or there are two pictures from different sources, such as one local and one server, so they are contaminated. canvas.
The solution is as follows
1. Add cross-domain for image request
var image = new Image()
image.setAttribute("crossOrigin",'Anonymous')
image.src = src
But it may be possible that the server does not allow you to request images across domains (I don’t know why), then use option 2.
2. Convert the requested image into base64 and then use
it. The code is as follows
function getURLBase64(url) {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest()
xhr.open('get', url, true)
xhr.responseType = 'blob'
xhr.onload = function() {
if (this.status === 200) {
var blob = this.response
var fileReader = new FileReader()
fileReader.onloadend = function(e) {
var result = e.target.result
resolve(result)
}
fileReader.readAsDataURL(blob)
}
}
xhr.onerror = function() {
reject()
}
xhr.send()
})
}
Comes with 250 sets of selected project source codes
Source code
screenshot
Source code acquisition:
Follow the public account "Coder Park" and reply [source code] to get the full set of source code download links
