今天在项目开发中遇到了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. 29 August

    P1352 Bosses' Masquerade 树形DP模板. #include <cstdio> #include <algorithm> using namespace ...

  2. [CSP-S模拟测试]:Reverse(模拟+暴力+剪枝)

    题目描述 小$G$有一个长度为$n$的$01$串$T$,其中只有$T_S=1$,其余位置都是$0$.现在小$G$可以进行若干次以下操作: $\bullet$选择一个长度为K的连续子串($K$是给定的常 ...

  3. STL容器内数据删除

    STL中的容器按存储方式分为两类,一类是按以数组形式存储的容器(如:vector .deque):另一类是以不连续的节点形式存储的容器(如:list.set.map).在使用erase方法来删除元素时 ...

  4. java 图片裁剪代码

    package com.actionsoft.apps.addons.invoice.pc.test; import java.awt.image.BufferedImage;import java. ...

  5. loj#500 「LibreOJ β Round」ZQC 的拼图

    分析 二分倍数 然后考虑dp[i][j]表示选到第i个x轴覆盖到j的情况y轴最多覆盖多少 贡献柿子可以画图然后相似三角形得到 代码 #include<bits/stdc++.h> usin ...

  6. Java常用工具——java异常

    package com.imooc.exception; import java.util.Scanner; public class TryCatchDemo1 { public static vo ...

  7. jmeter之cookies登录

    现在很多网站的登录都要验证码了,验证码的值是动态的,值不易获取.使用jmeter测试一个需要登录的接口就有困难,这时候,我们就可以使用cookies管理器来记住这个登录信息. 目录 1.jmeter的 ...

  8. Memecached 服务器安装(一)

    Memecached 服务器安装(一) 前提:首先您的php环境已经安装完成,如若没有则参考 http://www.cnblogs.com/xulele/p/5264781.html 安装环境链接:h ...

  9. Amber

    训练做的题里有板子单独拉出来. 欧拉筛 ],prim[N+]; int cnt; void Eular() { vis[]=vis[]=; ;i<N;i++) if(!vis[i]) { pri ...

  10. 图解Http阅读笔记(二)

    简单的HTTP协议 HTTP是一种不保存状态,即无状态(stateless)协议.HTTP 协议自身不对请求和响应之间的通信状态进行保存.也就是说在 HTTP 这个级别,协议对于发送过的请求或响应都不 ...