今天在项目开发中遇到了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不显示的更多相关文章

  1. 如何在HTML5 Canvas 里面显示 Font Awesome 图标

        Font Awesome 是一套完美的图标字体,主要目的是和 Bootstrap 搭配使用. 提供的CSS 已经可以完美显示这些图标在网页里面.最新的版本4.3 里面,已经提供519 Icon ...

  2. Firebug中调试中的js脚本中中文内容显示为乱码

    Firebug中调试中的js脚本中中文内容显示为乱码 设置 页面 UFT-8 编码没用, 解决方法:点击 "Firebug"工具栏 中的"选项"---" ...

  3. JS控制HTML元素的显示和隐藏

    JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...

  4. js控制不同的时间段显示不同的css样式

    js控制不同的时间段显示不同的css样式 js函数,可以放到单独的js文件中也可以放到当前页的<head>标记之内 function getCSS(){        datetoday ...

  5. 如是使用JS实现页面内容随机显示

    之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平.本文我们将和大家 ...

  6. 功能整合(一):滚动条的变相隐藏、js控制div的渐变显示、滚动条监听

    1.滚动条的变相隐藏 思路: 1.  把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2.  然后把最外层的div的宽设置的比body的宽宽一点,把d ...

  7. js读取本地图片并显示

    抄自 http://blog.csdn.net/qiulei_21/article/details/52785191 js读取本地图片并显示 第一种方法比较好 版权声明:本文为博主原创文章,未经博主允 ...

  8. 利用来JS控制页面控件显示和隐藏有两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一:  1 2 document.getEle ...

  9. (转)用JS实现表格中隔行显示不同颜色

    用JS实现表格中隔行显示不同颜色 第一种: <style> tr{bgColor:expression(     this.bgColor=((this.rowIndex)%2==0 )? ...

随机推荐

  1. JDBC链接Mysql失败

    错误信息:Error querying database.  Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLNonTransientConnectionExc ...

  2. Eclipse报内存溢出

    (1)在配置tomcat的JDK里面设置.Window-->proference->Myeclipse-->servers-->Tomcat5-->JDK里面设置: -X ...

  3. vue事件的绑定

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 【ABAP系列】SAP ABAP 如何控制Dialog中的键盘(回车)功能

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP 如何控制Dia ...

  5. LeetCode 144. Binary Tree Preorder Traversal 动态演示

    先序遍历的非递归办法,还是要用到一个stack class Solution { public: vector<int> preorderTraversal(TreeNode* root) ...

  6. github信息安全开源课

    尽可能的减少信息差:兄弟们,该知足了,这些资源非常的宝贵了. ### github探索-主题-令人敬畏的名单 令人敬畏的名单: https://github.com/topics/awesome 进入 ...

  7. DS-哈希表浅析

    1.哈希表 2.哈希函数 3.哈希冲突 哈希表 哈希表是一种按key-value存储的数据结构,也称散列表. 之前的数组.树和图等等查找一个值时都要与结构中的值相比较,查找的效率取决于比较的次数. 而 ...

  8. linux下shell显示git当前分支

    function git-branch-name { git symbolic-ref HEAD 2>/dev/null | cut -d"/" -f 3 } functio ...

  9. [Linux] 010 权限管理命令 chmod

    1. 权限管理命令:chmod 命令名称:chmod 命令英文原意:change the permissions mode of a file 命令所在路径:/bin/chmod 执行权限:所有用户 ...

  10. 次小生成树(Prim + Kruaskal)

    问题引入: 我们先来回想一下生成树是如何定义的,生成树就是用n - 1条边将图中的所有n个顶点都连通为一个连通分量,这样的边连成子树称为生成树. 最小生成树很明显就是生成树中权值最小的生成树,那么我们 ...