<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

</head>

<body>

    <img src="qr.jpg" alt="">

    <canvas width="400px" height="400px">

    </canvas>

    <script>

        var c = document.getElementsByTagName('canvas')[0]

        ctx=c.getContext('2d');

        var img = new Image();

        img.src = "./qr.jpg";

        img.onload = function(){

            ctx.drawImage(img,100,100,240,164);

        }

        // var img=document.getElementsByTagName('img')[0]

        console.log(img)

        // img.src='./bar.png'

    </script>

</body>

</html>

img 要加载完成后 才能画到画布上

canvas drawImage 不显示的更多相关文章

  1. <canvas>drawImage()方法无法显示图片

    在书上看到用<canvas>绘制图像就动手试试,刚开始,我的代码是这样的: <!DOCTYPE html> <html> <head> <meta ...

  2. canvas drawImage图片不显示问题

    初次学习canvas,用来做笔记记录下遇到的问题及解决方案 这里是要将一张图片写到canvas里,按照网上搜索,初写了段代码,可是却没显示,以为是路径问题,不能跨域名使用,后来改为相对路径后,仍然无效 ...

  3. canvas - drawImage()方法绘制图片不显示的问题

    canvas有个很强大的api是drawImage()(w3c): 他的主要功能就是绘制图片.视频,甚至其他画布等.   问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完 ...

  4. canvas drawImage方法不显示图片的解决方案

    先复习一下用法: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 各个参数说明: 参数 描述 img 规定要使用的图像.画布 ...

  5. Canvas DrawImage截取和压缩图片的陷阱

    html5的canvas十分之强大,可以做到快速的截取压缩出新的图片! 不过最近开发过程中遇到一个问题,图片压缩后使用toDataURL取得图片显示为一片漆黑,什么都没有! 折腾了很久,起初以为是上传 ...

  6. canvas drawImage异步特性

    先看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  7. Canvas drawImage API

    drawImage <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. canvas.drawImage()方法详解

    首先看html5.js /**@param {Element} img_elem@param {Number} dx_or_sx@param {Number} dy_or_sy@param {Numb ...

  9. FileReader 与canvas结合使用显示图片

    话不多少,直接上代码 function fileChange() { var file = this.files[0]; var imageType = /^image\//; //是否是图片 if ...

随机推荐

  1. Prism(WPF) 拐着尝试入门

    原文:Prism(WPF) 拐着尝试入门 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/s261676224/article/details/852 ...

  2. Mac下node.js安装与卸载

    安装: 访问 http://nodejs.org/ 进入官网,下载 Mac 版本的 node.js,双击打开安装即可. 通过终端输入命令 node -v 验证 node 是否安装正确:npm -v 验 ...

  3. E2E test protractor selenium

    E2E Test和传统的Unit Test不同的是:(1)不涉及代码层面,不会去测试某段代码是否正确或者某行代码是否被覆盖(2)它是从用户的角度出发,用来测试一个应用的流程是否符合预期. 一 Sele ...

  4. HIS 与医保系统的接入方案及实现

    HIS 与医保系统的接入方案及实现刘剑锋 李刚荣第三军医大学西南医院信息科(重庆 400038)摘要: 目的 建设HIS,迎接医疗改革的挑战.方法 分析HIS与地方医疗保险系统的不同特点,提出解决问题 ...

  5. nginx支持php配置

    location / { root /wwwroot/phptest; index index.html index.htm index.php; } location ~ \.(php|php5)$ ...

  6. cf#516A. Make a triangle!(三角形)

    http://codeforces.com/contest/1064/problem/A 题意:给出三角形的三条边,问要让他组成三角形需要增加多少长度 题解:规律:如果给出的三条边不能组成三角形,那答 ...

  7. selenium自动化之显式等待和EC（expected_conditions）模块

    很多人都有这种经历,selenium脚本当前运行没问题,过了一段时间再运行就报错了,然后过几天又好了.其中的原因估计60%的人都知道,是因为元素加载这块有问题.通常的解决方案就是加上sleep或者隐式 ...

  8. Java 输出对象为字符串 工具类

    public static String reflectionToString(Object o){ if(o == null) return StringUtils.EMPTY; StringBui ...

  9. lintcode 二分查找

    题目:二分查找 描述:给定一个排序的整数数组(升序)和一个要查找的整数target,用O(logn)的时间查找到target第一次出现的下标(从0开始),如果target不存在于数组中,返回-1. c ...

  10. 在几份docx文档中里查找某个值

    import docx, os def readDocx(fileName): doc = docx.Document(fileName) content = '\n'.join([para.text ...