详解canvas绘图时遇到的跨域问题

5/9/2018 9:35:54 PM 人评论次

当在canvas中绘制一张外链图片时，我们会遇到一个跨域问题。示例如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>crossorigin</title></head><body><canvas width=&q…

当在canvas中绘制一张外链图片时，我们会遇到一个跨域问题。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>crossorigin</title>
</head>
<body>
    <canvas width="600" height="300" id="canvas"></canvas>
    <img id="image" alt="">
    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var image = new Image();
        image.onload = function() {
            ctx.drawImage(image, 0, 0);
            document.getElementById('image').src = canvas.toDataURL('image/png');
        };
        image.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg';
    </script>
</body>

上一篇：canvas线条的属性详解

下一篇：canvas 下载二维码和图片加水印的方法

相关教程

css实现悬浮效果的阴影的方法示例

本文介绍了css实现悬浮效果的阴影的方法示例，分享给大家，具体如下：要实现的效果图：实现的代码：-webkit-box-shadow:0px 3px 3px #c8c8c8 ;-moz-box-shadow:0px 3px 3px #c8c8c8 ;box-shadow:0px 3px 3px #c8c8c8 ;
5/9/2018 9:37:43 PM
css选择器中有小数点的标签获取方法

需求说明因为项目中章节配置的时候有小数点，1，1.1,1.2,1.11的标题，这个时候每一行标题的id,class设置成标题号是独一无二的标记。但是，直接用js获取是获取不到的，例如$(#3.22)打印只能获取到document.解决方案var array = id.split(.);var id = ;for(var i=0;i…
5/9/2018 9:37:42 PM
纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）

三角形<div class="box"></div><style>.box{width: 0;height: 0;border-top: 50px solid transparent;border-bottom: 50px solid transparent;border-left: 50px solid transparent;border-right: 50px solid red;}</style>
5/9/2018 9:37:41 PM
纯css实现多级折叠菜单折叠树效果

1、运用checkbox的checked值来判断下级栏目是否展开，CSS3的选择器中提供了:checked 这个伪类，这个伪类提供我们，当元素拥有checked这个值的时候就执行你的CSS。当有子菜单时，菜单项右侧有向下的箭头，当收起菜单项时，箭头朝上。图片可以自己替换。2、效果图3、代码片…
5/9/2018 9:37:40 PM