js image转canvas不显示
今天在项目开发中遇到了image转canvas不显示的问题,最后翻了不少资料才发现问题出现在图片加载上
如果你的代码是这样的,那么不显示的原因就是img没有加载完成
function convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}
这样做试试
function convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
image.onload = function () {
canvas.getContext("2d").drawImage(this, 0, 0);
};
return canvas;
}
js image转canvas不显示的更多相关文章
- 如何在HTML5 Canvas 里面显示 Font Awesome 图标
Font Awesome 是一套完美的图标字体,主要目的是和 Bootstrap 搭配使用. 提供的CSS 已经可以完美显示这些图标在网页里面.最新的版本4.3 里面,已经提供519 Icon ...
- Firebug中调试中的js脚本中中文内容显示为乱码
Firebug中调试中的js脚本中中文内容显示为乱码 设置 页面 UFT-8 编码没用, 解决方法:点击 "Firebug"工具栏 中的"选项"---" ...
- JS控制HTML元素的显示和隐藏
JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...
- js控制不同的时间段显示不同的css样式
js控制不同的时间段显示不同的css样式 js函数,可以放到单独的js文件中也可以放到当前页的<head>标记之内 function getCSS(){ datetoday ...
- 如是使用JS实现页面内容随机显示
之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平.本文我们将和大家 ...
- 功能整合(一):滚动条的变相隐藏、js控制div的渐变显示、滚动条监听
1.滚动条的变相隐藏 思路: 1. 把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2. 然后把最外层的div的宽设置的比body的宽宽一点,把d ...
- js读取本地图片并显示
抄自 http://blog.csdn.net/qiulei_21/article/details/52785191 js读取本地图片并显示 第一种方法比较好 版权声明:本文为博主原创文章,未经博主允 ...
- 利用来JS控制页面控件显示和隐藏有两种方法
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 document.getEle ...
- (转)用JS实现表格中隔行显示不同颜色
用JS实现表格中隔行显示不同颜色 第一种: <style> tr{bgColor:expression( this.bgColor=((this.rowIndex)%2==0 )? ...
随机推荐
- 备份mysql的shell
• #!/bin/bash• file_name=`date +%Y%m%d%H%M%S`• db_path='/usr/local/db_back/'• mysqldump -ulepus -p12 ...
- 使用notepad++写markdown的配置过程
已过时 下载最新的markdown插件,github 解压后将MarkdownViewerPlusPlus.dll复制一份到notepad就能看到markdown插件的小图标了 设置markdown高 ...
- Lambda拉姆达表达式
拉姆达表达式常用于委托,也就是说拉姆达表达式是匿名函数,简单点就是函数. a => a.Equals("string"); //原形为: (a) => { return ...
- vsphere虚拟化之 DNS服务的创建(二)
1.创建域控的DNS服务器,打开"服务器管理器",由此可以看到AD域安装成功后,DNS服务也附带安装成功. 2.点击“工具”--“DNS” 3.点击“正向查询区域”--“best. ...
- knn 数据集准备
""" Created on Mon Aug 26 20:57:24 2019 @author: huoqs knn algorithm ""&quo ...
- [Linux] 010 权限管理命令 chmod
1. 权限管理命令:chmod 命令名称:chmod 命令英文原意:change the permissions mode of a file 命令所在路径:/bin/chmod 执行权限:所有用户 ...
- android项目的目录结构讲解
参考书籍:<第一行代码Android> 一:android项目的目录结构讲解 1..gradle和.idea 这两个目录下放置的都是Android Studio自动生成的一 ...
- python学习第二十二天文件byte类型
所有的文件在计算机里面存储为二进制形式,但是我们有时候有需要将二进制转换为gbk或者utf-8形式,编码的时候encode 解码的时候decode ,下面简单阐述python二进制在文件传输过程的作用 ...
- centos7中mysql不能输入中文问题的解决
首先在数据库里面输入 mysql> show variables like'%char%' -> ; +--------------------------------------+--- ...
- NGUI技能CD效果制作(sprite的type:filled)
一,我们先添加一个sprite,改名为skill.给当前skill添加图片,然后再sprite下添加一个sprite和一个label,结果如下 二现在我们来设置skill下的sprite,给他设置一个 ...