今天在项目开发中遇到了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. Vagrant 手册之网络 - 概述及基本用法

    原文地址 - 概述 原文地址 - 基本用法 为了访问创建的 Vagrant 环境,Vagrant 为端口转发.连接公共网络.创建私有网络等功能暴露了一些高层网络选项. 高层网络选项用于提供可以跨 pr ...

  2. python实现处理excel单元格中的数据

    实现代码如下: # 将数据单元格(格式为:参数名=值)里的数据以键值对的形式放入字典中,返回该字典 class get_string: def cut_string(self,string): # 将 ...

  3. Autoencoder基本操作及其Tensorflow实现

    最近几个月一直在和几个小伙伴做Deep Learning相关的事情.除了像tensorflow,gpu这些框架或工具之外,最大的收获是思路上的,Neural Network相当富余变化,发挥所想.根据 ...

  4. Java thread(4)

    这一块主要是讨论关于进程同步的相关问题,主要是考虑一下的关键字:锁对象.条件对象 -> synchronized wait() notify(). 1.关于锁对象与条件对象: 所对象的定义在ja ...

  5. PAT甲级【2019年9月考题】——A1164 DijkstraSequence【30】

    7-4 Dijkstra Sequence (30 分) Dijkstra's algorithm is one of the very famous greedy algorithms. It is ...

  6. jmeter对响应数据做断言

    单独校验某个接口中的某个字段时,断言就相当于检查点 添加http请求,输入路径url

  7. Django+python报错与解决方法

    编码信息导致修改django文件下的debug.py文件331行的编码格式 with Path(CURRENT_DIR, 'templates', 'technical_500.html').open ...

  8. SAP选择屏幕开发(一)(转)

    原文链接:https://blog.csdn.net/wtxhai/article/details/90632686 用户通过屏幕操作来实现与SAP的数据交互,而SAP的屏幕开发一般分为两种,一种是通 ...

  9. hashCode -哈希值,Object中的方法,常根据实际情况重写

    package cn.learn.collection; import cn.learn.basic.Phone; /* 哈希值:是一个十进制的整数,由系统随机给出(就是对象的地址值),是一个逻辑地址 ...

  10. [Linux] 017 网络命令与挂载命令

    1. 网络命令:write 命令名称:write 命令所在路径:/usr/bin/write 执行权限:所有用户 语法:write [用户名] 功能描述:给用户发信息,以 Ctrl-d 保存结束 范例 ...