canvas2html插件
[插件官网
http://html2canvas.hertzen.com/
| Name | Default | Description |
|---|---|---|
| allowTaint | false |
Whether to allow cross-origin images to taint the canvas |
| backgroundColor | #ffffff |
Canvas background color, if none is specified in DOM. Set null for transparent |
| canvas | null |
Existing canvas element to use as a base for drawing on |
| foreignObjectRendering | false |
Whether to use ForeignObject rendering if the browser supports it |
| imageTimeout | 15000 |
Timeout for loading an image (in milliseconds). Set to 0 to disable timeout. |
| ignoreElements | (element) => false |
Predicate function which removes the matching elements from the render. |
| logging | true |
Enable logging for debug purposes |
| onclone | null |
Callback function which is called when the Document has been cloned for rendering, can be used to modify the contents that will be rendered without affecting the original source document. |
| proxy | null |
Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded. |
| removeContainer | true |
Whether to cleanup the cloned DOM elements html2canvas creates temporarily |
| scale | window.devicePixelRatio |
The scale to use for rendering. Defaults to the browsers device pixel ratio. |
| useCORS | false |
Whether to attempt to load images from a server using CORS |
| width |
Element width |
The width of the canvas
|
| height |
Element height |
The height of the canvas
|
| x |
Element x-offset |
Crop canvas x-coordinate |
| y |
Element y-offset |
Crop canvas y-coordinate |
| scrollX |
Element scrollX |
The x-scroll position to used when rendering element, (for example if the Element uses position: fixed) |
| scrollY |
Element scrollY |
The y-scroll position to used when rendering element, (for example if the Element uses position: fixed) |
| windowWidth | Window.innerWidth |
Window width to use when rendering Element, which may affect things like Media queries |
| windowHeight | Window.innerHeight |
Window height to use when rendering Element, which may affect things like Media queries |
我需要绘制部分的html不需要展示在当前视图中，所以我需要将其隐藏:
#canvas-view {
position: fixed;
z-index: 1000;
left: -200%;
top: -200%;
width: 100%;
background-color: #fff;
隐藏之后发现在绘制的过程中出现了半截的情况，在官网QA中看到了相关的资料：
Why is the produced canvas empty or cuts off half way through?
Make sure thatcanvaselement doesn't hit browser limitations for thecanvassize or use the window configuration options to set a custom window size based on thecanvaselement:
await html2canvas(element, {
windowWidth: element.scrollWidth,
windowHeight: element.scrollHeight
});
再次看配置项中，看到了
| Name | Default | Description |
|---|---|---|
| scrollX |
Element scrollX |
The x-scroll position to used when rendering element, (for example if the Element uses position: fixed) |
| scrollY |
Element scrollY |
The y-scroll position to used when rendering element, (for example if the Element uses position: fixed) |
然后将其设置为0，再次渲染就是正常的了。
// 绘制canvas并插入到图片预览组件中
creatCanvasImage(index) {
var that = this;
var canvasView = this.$refs.canvasView;
html2canvas(canvasView, {allowTaint: true, scrollX: 0, scrollY: 0}).then(function(canvas) {
var url = canvas.toDataURL();
that.$toast.clear();
that.previewUrl = url;
alert(url);
that.previewImages.splice(index, 1, url);
});
},
