crops over 256px width or height go black in chrome 65

[RichPC]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report 
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Using your demo page https://fengyuanchen.github.io/photo-editor/ in Chrome 65 Uploading the Emma Watson jpg from the main site, any crop smaller than 256px x 256px works, anything larger goes black. With chromium and firefox the crops work at all sizes. Using https://fengyuanchen.github.io/cropperjs/ in Chrome the crops work at all sizes

Expected behavior

Crops over 256px should work in Chrome.

Minimal reproduction of the problem with instructions

Open the demo page https://fengyuanchen.github.io/photo-editor/ in Chrome 65 Upload a jpg. Try a crop smaller than 256px square and it works Try a crop larger than 256px and it fails.

What is the motivation / use case for changing the behavior?

It looks like this https://fengyuanchen.github.io/photo-editor/ uses cropper with vue Where this https://fengyuanchen.github.io/cropperjs/ just uses javascript So I'm wondering if there's some strange memory issue that's only happening in chrome with the vue+cropper combination

Environment

Cropper.js version: 1.0.0 (in your photo-editor demo)

Using 1.3.4 and vue in my own code I'm seeing the same problem

Browser:
- [X] Chrome (desktop) version 65
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

Others:

[RichPC]

I've tested this further and it's nothing to do with vue.

The following is using only cropper.js 1.3.4

In Chrome 65 it fails In Chromium and Firefox it works

var image = document.getElementById('image'); var cropper = new Cropper(image, { aspectRatio: 16 / 9, crop: function (event) { console.log(event.detail.x); console.log(event.detail.y); console.log(event.detail.width); console.log(event.detail.height); console.log(event.detail.rotate); console.log(event.detail.scaleX); console.log(event.detail.scaleY); console.log(cropper.getCroppedCanvas().toDataURL('image/jpeg')) } });

[RichPC]

Sorry, my previous comment had a logic/timing error.

This code running in chrome 65 works

`
var image = document.getElementById('image');

var cropper = new Cropper(image, { aspectRatio: 1 / 1, crop: function (event) { console.log(event.detail.x); console.log(event.detail.y); console.log(event.detail.width); console.log(event.detail.height); console.log(event.detail.rotate); console.log(event.detail.scaleX); console.log(event.detail.scaleY); window.setTimeout(() => { let canvas = cropper.getCroppedCanvas({width:350, height:350, maxWidth:4096, maxHeight:4096}); var cw = document.getElementById('new-canvas-wrapper'); cw.appendChild(canvas); }, 1000) } }); `

That works, the cropped canvas displays the image. What's failing is canvas.toDataURL('image/jpeg') in chrome 65

[RichPC]

Hi, I've downloaded the latest dev build of chrome for linux version 67, This canvas.toDataUrl bug with cropped canvas's greater than 256px doesn't happen in this version, so it looks like this is a bug with chrome 65