html2canvas边框不现实,html2canvas边框图像问题

我正在使用html2canvas库来截取html视图的截图。html2canvas边框图像问题

但背景图像加载失败。我收到错误消息Error loading background：

window.takeScreenShot = function() {

html2canvas(document.getElementById("target"), {

onrendered: function (canvas) {

document.body.appendChild(canvas);

useCORS:true,

logging:true,

allowTaint:true

});

}

#target{

width:300px;

height:160px;

background:lightblue;

color:#fff;

padding:10px;

background-image: url(https://static.pexels.com/photos/20974/pexels-photo.jpg);

background-repeat:no-repeat;

background-position:center center;

-o-background-size: 100%;

-moz-background-size: 100%;

-webkit-background-size: 100%;

background-size: 100%;

height: 100%;

}

#borderimg1 {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 30 round; /* Safari 3.1-5 */

-o-border-image: url(https://www.w3schools.com/cssref/border.png) 30 round; /* Opera 11-12.1 */

border-image: url(https://www.w3schools.com/cssref/border.png) 30 round;

}

#borderimg2 {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch; /* Safari 3.1-5 */

-o-border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch; /* Opera 11-12.1 */

border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch;

}

to image

The border-image property specifies an image to be used as the border around an element:

Here, the middle sections of the image are repeated to create the border.

Here, the middle sections of the image are stretched to create the border.

Here is the original image:

Note: Internet Explorer 10, and earlier versions, do not support the border-image property.

2017-08-21

Gopi raj

html2canvas边框不现实,html2canvas边框图像问题相关推荐

html2canvas图片截图截不到图像的问题解决
html2canvas图片截图截不到图像的问题解决参考文章: (1)html2canvas图片截图截不到图像的问题解决 (2)https://www.cnblogs.com/netcorner/p/ ...
Html中的边框弧边,CSS边框属性一---border-radius
1.CSS outline 属性 outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. p { outline:#00FF00 dotted thick; } ...
html 折线边框,HTML中的边框属性
可以通过边框风格属性border-style设定上下左右边框的风格,该属性用于设置一个元素边框的样式,而且必须用于指定可见的边框.可以使用1到4个关键字,如果四个值都给出了,它们分别用于上.右.下和左 ...
html边框绕着图片,CSS 边框
CSS 边框在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素. 元素外边距内就是元素的的边框 (border) ...
html 一行显示边框线,HTML 网页中要显示出来一个虚线的边框就是一行字在边框里面，那个边框是显示出来的，程式码应该怎么写？...
HTML 网页中要显示出来一个虚线的边框就是一行字在边框里面,那个边框是显示出来的,程式码应该怎么写?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内 ...
div 设置 hover时边框颜色_CSS 奇思妙想边框动画
border 属性谈到边框,首先会想到 border,我们最常用的莫过于 solid,dashed,上图中便出现了 dashed. 除了最常见的 solid,dashed,CSS border 还支 ...
vue html2canvas用法,vue中html2canvas的使用（地图截图）
1,下载html2canvas插件 npm install --save html2canvas 2,引入html2canvas import html2canvas from 'html2canva ...
python 打印表格边框_python设置表格边框的具体方法
安装 xlwings 直接安装用 pip install xlwings,用 anaconda 的,已经内置了,见下图. 导入 xlwings import xlwings as xw 打开 Exce ...
html设置边框dw,Dreamweaver表格边框设置的css语法大全
Dreamweaver表格边框设置的css语法大全具体内容包括:上边框宽度.右边框宽度.下边框宽度.左边框宽度.边框宽度.边框颜色.边框样式.上边框.下边框.左边框.右边框.边框.宽度.高度.有关标 ...

html2canvas边框不现实,html2canvas边框图像问题

html2canvas边框不现实,html2canvas边框图像问题相关推荐

最新文章

热门文章