使用cropper.js裁切图片模糊

在使用cropper.js做裁剪是发现裁切的图片不够清晰,主要是由于canvas画图像素问题

解决方法:
context = canvas.getContext('2d'),
改为 context = canvas.getContext('2d').translate(0.5,0.5),即可

cropper.js代码位置

 function getSourceCanvas(image, data) {
    var canvas = $('<canvas>')[0],
       context = canvas.getContext('2d').translate(0.5,0.5),
        width = data.naturalWidth,
        height = data.naturalHeight,
        rotate = data.rotate,
        rotated = getRotatedSizes({
          width: width,
          height: height,
          degree: rotate
        });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 4,789评论 2 32
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 3,981评论 3 40
  • 书中代码示例效果展示:Core HTML5 Canvas Examples 基础知识 canvas元素 canva...
    szu_bee阅读 2,908评论 2 28
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    J_L_L阅读 1,577评论 0 4
  • Canvas API 在网页上使用cnavas元素时,会创建一块矩形区域,默认大小是300*150px 坐标从左上...
    Iris_mao阅读 736评论 0 6