首先这个问题会出现在需要图片编辑的业务中，在我们做图片旋转、放大、移动等操作时，被处理的图片会超出原本的容器，此时我们会给父容器增加一个属性overflow:hidden，这样就显示不会出现溢出问题，此时我们去做截图操作生成的图片正常的，hidden部分不会出现,可以有网上提问
利用html2canvas保存图片时div中overflow:hidden也显示了出来
,像这种情况本人在实际的运用中也是遇到过的。原因其实很简单的。
在html2canvas社区也提出这个问题
Not hiding overflow:hidden data
-
其实就我们嵌套了两层容器，我们查看通常情况下
overflow：hidden不起作用的一种情况
，这些都是显示出了问题罢了，先看以代码
<1>、情景一
<div class="albumpreviewdiv">
<div style="overflow: hidden;width: 100%" id="frame_content_add">
<img src="static/img/icon_tianjia@3x.png" class="frame_add" id="frame_add" >
<img class="frame_mask" v-bind:src="getimg(frame_data.img)">
......
var mainCancas = document.createElement("canvas"),
ctx = mainCancas.getContext('2d');
mainCancas.width = 800;
mainCancas.height = 800 / _this.aspect_ratio;
ctx.rect(0, 0, 800, 800 / _this.aspect_ratio);
ctx.fillStyle = '#fff';
ctx.fill();
html2canvas($('.albumpreviewdiv'), {
onrendered: function (canvas) {
ctx.drawImage(canvas,0,0, 800, 800 / _this.aspect_ratio);
var src = mainCancas.toDataURL();
效果图：
结果还好，没有溢出，这是手机web生成的清晰还好，我的上一篇提到了截图模糊的问题。
<1>、情景二
<div class="albumitemcontent">
<a style="overflow: hidden;position: absolute;background:#F2F2F2;display: none" >
<img src="static/img/icon_tianjia@3x.png" style="width: 0.5rem;height: 0.5rem;position: absolute" >
<img style="position: absolute;z-index: 100" onclick="document.querySelector('input').click()" @click="inputBtn($event)" >
<a style="overflow: hidden !important;position: absolute;background:#F2F2F2;display: none" >
<img src="static/img/icon_tianjia@3x.png" style="width: 0.5rem;height: 0.5rem;position: absolute" >
<img style="position: absolute;z-index: 100" onclick="document.querySelector('input').click()" @click="inputBtn($event)">
</div>
此时布局页面变得复杂了，子容器不再是一个了，直接截图的结果就是
我在右边的容器添加的图片截图结果左边也显示出来了，这就很尴尬了。方法那就只能分单个容器来操作了，最后在绘制到同一张画布上去，看代码
var mainCancas = document.createElement("canvas"),
ctx = mainCancas.getContext('2d');
mainCancas.width = 1500/_this.zoom;
mainCancas.height = 1500/_this.zoom/1.4150;
ctx.rect(0, 0, 1500/_this.zoom, 1500/_this.zoom/1.4150);
ctx.fillStyle = '#fff';
ctx.fill();
html2canvas($('#base_f_'+0), {
onrendered: function(canvas0) {
ctx.drawImage(canvas0,_this.data[0][0].x/_this.zoom,_this.data[0][0].y/_this.zoom);
html2canvas($('#base_s_'+0), {
onrendered: function(canvas1) {
var url =mainCancas.toDataURL("image/png");
这样生成图片就OK了
首先这个问题会出现在需要图片编辑的业务中，在我们做图片旋转、放大、移动等操作时，被处理的图片会超出原本的容器，此时我们会给父容器增加一个属性overflow:hidden，这样就显示不会出现溢出问题，此时我们去做截图操作生成的图片正常的，hidden部分不会出现,可以有网上提问利用html2canvas保存图片时div中overflow:hidden也显示了出来,像这种情况本人在实际的运用中也是遇到
低版本HTML2canvas
前端开发 生成海报 截图等功能
1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM，因此可能不是 100% 准确到真实表示，因为它不会制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。
2.它只能正确渲染它理解的属性，这意味着有许多 CSS 属性不起作用；
html2canvas官网 https://html2canvas.hertzen.com/
Firefox 3.5+
Google Chrome
Opera 12+
Safari 6+
鉴于找我讨论坑点的同仁比较多，直接建了交流群，欢迎大家加入：
毕竟众人拾柴火焰高，有可能你遇到的问题就是别人已经解决的。
(若二维码失效，加我好友【二维码没过期请自行加群，不用添加好友~】(微信号：)，加好友请输入暗号：html2canvas填坑群，拉你进群)
因为万恶的广告份子总是进群撒广告、然后加我好友骚扰！这种技术群也进来撒广告！实在很过分！！所以连夜紧急去掉微信二维码和我的微信号了(现在...
根据你提供的代码，可能是因为你使用了Vue的语法，但是没有引入Vue。如果你想在Vue中使用这段代码，需要先在Vue组件内引入Vue，并且将该代码放在template标签内，如下所示：
```html
<template>
<view style="width: 0;height: 0;overflow: hidden;position:fixed;left: 200%;" :style="'width':'50rpx'">
<canvas canvas-id="firstCanvas" style="border:1px solid #000000;" class="canvas"></canvas>
</view>
</template>
<script>
import Vue from 'vue'
export default {
name: 'MyComponent',
// ...
</script>
如果你不是在Vue中使用该代码，可能还需要提供更多的上下文信息，才能进一步确定报错原因。
