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 )? ...
随机推荐
- properties与yml之间的比较
在Spring Cloud的配置文件中,发现使用yml与properties两种后缀的文件: 在application.properties中内容是这样的: server.port=8801eurek ...
- 有道翻译爬取【json】
''' @Modify Time @Author ------------ ------- 2019/9/2 0:19 laoalo ''' import requests import json i ...
- 继承ConstraintLayout
开发中复杂的布局基本上都可以通过ConstraintLayout实现,所以我们继承ConstraintLayout实现一个EasyConstraintLayout能够为子view添加圆角和阴影效果. ...
- Java-访问控制权限
Java面向对象-访问控制权限 Java中,可以通过一些Java关键字,来设置访问控制权限: 主要有 private(私有), package(包访问权限),protected(子类访问权限),pub ...
- day05—JavaScript之函数调用
转行学开发,代码100天——2018-03-21 JavaScript中的函数调用有4种方式: 方式一:直接通过函数名调用 在 HTML 中默认的全局对象是 HTML 页面本身,所以函数是属于 HTM ...
- SmokeTest测试流程
没办法了,本来是表格,但是粘贴不过来 测试目的: 用于检测该版本在基本的应用场景下,基本的功能是否满足. 测试前提: 发货版本 示例:ATV9冒烟测试测试项解读 表格获取:Google ATV hel ...
- SQL计算两个时间段相隔时间
SQL语句: select cast(floor(datediff(minute,时间1,时间2) / 1440) as varchar)+'天'+ cast(floor((datediff(minu ...
- org.hibernate.id.IdentifierGenerationException: Hibernate异常
异常信息: org.hibernate.id.IdentifierGenerationException: ids for this class must be manually assigned b ...
- 机器学习 coursera_ML
在开始看之前,浏览器一直出现缓冲问题,是配置文件设置的不对,最后搞定,高兴!解决方法如下: 1.到C:\Windows\System32\drivers\etc下找到host文件,并以文本方式打开, ...
- SpringMVC请求处理流程源码
我们首先引用<Spring in Action>上的一张图来了解Spring MVC 的核心组件和大致处理流程: 从上图中看到①.DispatcherServlet 是SpringMVC ...