fengyuanchen/cropperjs

Sometimes after crop white color not white

Open

#1072 opened on May 17, 2023

View on GitHub
 (7 comments) (0 reactions) (0 assignees)JavaScript (12,111 stars) (2,388 forks)batch import
help wantedquestionv1

Description

Describe the bug Sometimes after crop white color not white, it depends on the position crop area. It happens on all images with white color(maybe not only white, but on white color it more noticeably) only on chrome browser.

To Reproduce

const cropper = new cropperjs(document.getElementById('source'), {
  aspectRatio: 1,
  ready: function() {
    this.cropper.setCropBoxData({
      left: 72,
      top: 18,
      width: 250,
      height: 250,
    })
    
    crop()
  }
})

function crop() {
  document.getElementById('preview').src = cropper.getCroppedCanvas({
    imageSmoothingEnabled: true,
    imageSmoothingQuality: 'high',
    fillColor: '#fff',
  }).toDataURL()
}

document.getElementById('save').onclick = crop

https://codepen.io/rodigy/pen/abRRmQq

Expected behavior White color not chaged.

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser Chrome
  • Version 113

Additional context Tested on firefox, work fine

Contributor guide

Tech stack
javascripthtmlcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
JavaScriptHTML canvasbrowser developer tools
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate the Chrome specific canvas rendering bug that causes white color to become non white after cropping. The issue is reproduced in the provided CodePen (https://codepen.io/rodigy/pen/abRRmQq). Focus on the `getCroppedCanvas` method and the `imageSmoothingEnabled` and `fillColor` options. Compare behavior between Chrome and Firefox. Check if it's related to color space or pixel manipulation in the canvas. The main source file is likely in the `src` directory, specifically the canvas handling code. Review comments #1072 for any additional insights.