fengyuanchen / cropper

⚠️ [Deprecated] No longer maintained, please use https://github.com/fengyuanchen/jquery-cropper
MIT License
7.75k stars 1.74k forks source link

checkered background with pure css #1045

Closed kapouer closed 4 years ago

kapouer commented 5 years ago

Hi ! Instead of:

url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC')

one can do:

background-image: linear-gradient(45deg, #333 25%, transparent 25%), linear-gradient(-45deg, #333 25%, transparent 0), linear-gradient(45deg, transparent 75%, #333 75%), linear-gradient(-45deg, transparent 75%, #333 75%);
background-size: 14px 14px;
background-position: 0 0, 0 7px, 7px -7px, -7px 0px;
background-color: black;

or something similar (sorry i did not manage to get the same result, go figure). edit that one now looks the same.

amirgee007 commented 5 years ago

$("#imagen").croppie('result', { type: 'canvas',format :'jpeg', backgroundColor:'white'}).then(function(resp){ //--- your code })

amirgee007 commented 5 years ago

$('#cropImageBtn').on('click', function(ev) { $uploadLogoCrop.croppie('result', { type: 'base64', format: 'jpeg', backgroundColor:'white', size: {width: 300, height: 300} }).then(function(resp) { $('#image_logo').val(resp); $('#item-img-output').attr('src', resp); $('#cropImagePop').modal('hide'); }); });

fengyuanchen commented 4 years ago

@kapouer I know that solution, but linear-gradient is not supported in IE 9, but Cropper supports IE 9 currently. I may improve this in the next major version.