首先定义一个画布

canvas id="myCanvas"></canvas>
        var canvas = document.getElementById('myCanvas')
// var btn = document.getElementById('btn')
var cxt = canvas.getContext("2d")
var img = new Image() //创建一个image对象 通过构造函数创建 img 实例 img.onload = function () { // 确保图片完整获取到,创建一个异步事件
console.log(img.width) // 0
// canvas.width = img.width;
// canvas.height = img.height;
cxt.drawImage(img, 0, 0) // 将图片绘制到canvas中
} img.src = "../10.jpg" //(给浏览器缓存一张照片)
console.log(img.width) // 4608

这里有个问题,创建的图片 img 宽度为4608,还没找到原因

关于 画布导出图片 参考:画布导出图片

html图片导入画布的更多相关文章

  1. 如何轻松的把图片导入execl表格中

    在项目中有时候会遇到往数据库中导数据的时候,往往需要把图片也一起导入execl表格中,那怎么才能把图片一块导入至execl中呢?那么今天我们就来看看怎么实现吧! 如何实现?今天我们就来用jxl和poi ...

  2. ASP.NET 开源导入导出库Magicodes.IE 完成Excel图片导入导出

    Magicodes.IE Excel图片导入导出 为了更好的根据实际功能来迭代,从2.2的里程碑规划开始,我们将结合社区的建议和意见来进行迭代,您可以点此链接来提交您的意见和建议: https://g ...

  3. unity, 调节图片导入尺寸

    unity中直接导入高清图,通过max size来调节图片尺寸. 打包的时候通过看editor log或通过插件来监视是否有过大尺寸的图片.

  4. GD图片(画布)的制作及验证码的应用

    创建画布:创建画布的函数有 imagecreatetruecolor(width,height);创建画布 width指画布的宽height指画布的高 imagecolorallocate(img,r ...

  5. Hybris商品图片导入与压缩有关的配置

    1.   在电脑上安装 ImageMagick 软件(windows平台还需要安装VC++),下载路径:http://www.imagemagick.org/script/download.php#w ...

  6. 解决 canvas 下载含图片的画布时的报错

    Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may no ...

  7. (原)关于使用imagemagick将gif叠加到图片或者画布上的方法,以及疑难杂症

    今天因为项目过程中,有一个小需求,需要将一个指定的gif按照指定大小,叠加到画布的指定位置上,本来对于熟悉这块的人,简直就是小菜一碟哈,但本人因为对imagemagick的不熟悉,导致在这个需求上摸索 ...

  8. 微信小程序 base64 图片 canvas 画布 drawImage 实现

    在微信小程序中 canvas drawImage API 传入的第一个参数是 imageResource 图片资源路径,这个参数通常由从相册选择图片 wx.chooseImage 或 wx.getIm ...

  9. poi将图片导入excel(Java代码)

    package com.fh.util;import java.awt.image.BufferedImage;  import java.io.ByteArrayOutputStream;  imp ...

随机推荐

  1. PHP-在排序数组中查找元素的第一个和最后一个位置

    给定一个按照升序排列的整数数组 nums,和一个目标值 target.找出给定目标值在数组中的开始位置和结束位置. 你的算法时间复杂度必须是 O(log n) 级别. 如果数组中不存在目标值,返回 [ ...

  2. Java之JDBC操作数据库

    DBC JDBC就是一套接口,真正执行的是jar包里得实现类,通过泛型对象来执行实现类里的方法. 步骤: ###1.导入驱动jar包到工程中 ###2.编写代码注册驱动,我们要让程序知道用的是哪个驱动 ...

  3. springboot集成使用rabbitmq笔记(2.rabbitmq使用)

    使用rabbitmq笔记一 使用rabbitmq笔记二 使用rabbitmq笔记三 1.引入包 <dependencies> <dependency> <groupId& ...

  4. 关键字this super final static

    this关键字 1.this代表通过当前类实例化成的对象. 2.通过this来获取当前类的属性和方法 3.通过this和区分成员变量和局部变量 4.通过this(参数),调用当前类的构造方法 注意:通 ...

  5. C存储类

    C 存储类 存储类定义 C 程序中变量/函数的范围(可见性)和生命周期.这些说明符放置在它们所修饰的类型之前.下面列出 C 程序中可用的存储类: auto register static extern ...

  6. 【基础】Linux软件安装方法

    linux中wget .apt-get.yum rpm区别 wget 类似于迅雷,是一种下载工具, 通过HTTP.HTTPS.FTP三个最常见的TCP/IP协议下载,并可以使用HTTP代理 名字是Wo ...

  7. delphi 数据处理

    TStringStream 怎样转换String procedure TForm1.Button1Click(Sender: TObject); var ss:TStringStream; str:S ...

  8. (转)OpenFire源码学习之四:openfire的启动流程

    转:http://blog.csdn.net/huwenfeng_2011/article/details/43413233 openfire启动 ServerStarter 启动流程图: 启动的总入 ...

  9. python re 正則匹配規則

  10. jenkins集成sonar代码审核工具

    在项目测试管理过程中,项目上线很多时候时间仓促,导致代码质量不高,测试时间不充分会导致线上出现各种各样的问题,这个时候一方面是增加测试的质量把控,还要从根本上解决开发小哥的代码质量问题.而Sonar这 ...