powerbot15 / image-compressor Goto Github PK

import React         from 'react'
import Link          from 'gatsby-link'
import NotFound       from '../assets/images/image-not-found.png'
import Moment        from 'react-moment'

const localServer = "http://localhost:1337"

var imageCompressor = new ImageCompressor;  
var compressorSettings = {
    toWidth : 100,
    toHeight : 100,
    mimeType : 'image/png',
    mode : 'strict',
    quality : 0.6,
    grayScale : true,
    sepia : true,
    threshold : 127,
    vReverse : true,
    hReverse : true,
    speed : 'low'
};

const NewsSection = ({data}) => {            
  function renderImage(imgSrc) {
    return imageCompressor.run(imgSrc, compressorSettings, (compressedSrc) => {
      console.log(imgSrc)
    })
  }

  return (
    <section className="features" id="news">
      <div className="container team-container">
        <div className="row">
          <div className="col-lg-12 text-center">
            <div className="navy-line teal-color"></div>
            <h1>News</h1>
          </div>
        </div>

        { data.map(document => (
            
            <div className="row blog-post">
              <div className="col-sm-12 col-md-4">
                <img 
                  src={document.node.image ? renderImage(localServer + document.node.image.url) : NotFound } 
                  alt="" 
                  className="img-fluid"
                />
              </div>
              <div className="col-sm-12 col-md-8">
                <h2>{document.node.headline}</h2>
                <div className="news-credit">
                  <strong className="commens-name">{document.node.publisher}</strong>
                  <span style={{marginLeft: '5px'}}/>
                  <small className="text-muted">Publication date
                    <span style={{marginLeft: '5px'}}/>
                    <Moment parse="YYYY-MM-DD HH:mm:ss">
                      {document.node.publish_date}
                    </Moment>
                  </small>
                </div>
                <hr/>
                <p>{document.node.content}</p>
                <a href={document.node.post_link} target="blank">
                  <button className="btn btn-primary">Read More</button>
                </a>
              </div>
            </div>
          ))
        }
      </div>
    </section>
  )
}

export default NewsSection

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
    at ImageCompressor.grayScale (file:///D:/Project/node_modules/image-compressor/image-compressor.js:164:40)
    at ImageCompressor.imageFilters (file:///D:/Project/node_modules/image-compressor/image-compressor.js:212:22)
    at ImageCompressor.compressAddOn (file:///D:/Project/node_modules/image-compressor/image-compressor.js:74:18)
    at ImageCompressor.compress (file:///D:/Project/node_modules/image-compressor/image-compressor.js:59:18)
    at ImageCompressor.imageLoaded (file:///D:/Project/node_modules/image-compressor/image-compressor.js:34:18)

   var imageCompressor = new ImageCompressor();
    
    var compressorSettings = {
            toWidth : 100,
            toHeight : 100,
            mimeType : 'image/jpg',
            mode : 'strict',
            quality : 0.6,
            grayScale : true,
            sepia : true,
            threshold : 127,
            vReverse : true,
            hReverse : true,
            speed : 'high'
        };
    
    window.addEventListener("load",e=>{
        imageCompressor.run("test.jpg", compressorSettings, proceedCompressedImage);
    })
    
    
    function proceedCompressedImage (compressedSrc) {
        console.log(compressedSrc)
    }

import "image-compressor";
var ImageCompressor = new window.ImageCompressor();

var compressorSettings = {
  toWidth: 100,
  toHeight: 100,
  mimeType: "image/png",
  mode: "strict",
  quality: 0.6,
  grayScale: true,
  sepia: true,
  threshold: 127,
  vReverse: true,
  hReverse: true,
  speed: "low"
};

const proceedCompressedImage = compressedSrc => {
  console.log("Compressed Src: ", compressedSrc);
};

export const compressImg = imageSrc => {
  ImageCompressor.run(imageSrc, compressorSettings, proceedCompressedImage);
};

form.parse(req, function(err, fields, files) {
     var fileSize = files.attachment.size;

   if(fileSize!=0){
        var filePath = files.attachment.path;
        var fileName = files.attachment.name;
        var fileType = files.attachment.type;
    
        encodedImage = imageBase64.local(filePath);

        var imageCompressor = new ImageCompressor;
        var compressorSettings = {
            toWidth : 100,
            toHeight : 100,
            mimeType : 'image/png',
            mode : 'strict',
            quality : 0.6,
            speed : 'low'
        };

        imageCompressor.run(filePath, compressorSettings, .proceedCompressedImage());
       
   }