Merge images, remove image colors, change image contrast and more.

process_image.js

var appHost = '*SERVER_ADDRESS*';
var appId = '*FB_APP_ID*';

window.fbAsyncInit = function() {
    FB.init({
        appId      : appId,
        cookie     : true,
        xfbml      : true,
        version    : 'v2.8'
    });
};

function fb_login(){
    FB.login(function(response) {
        if (response.authResponse) {
            checkLoginState();
        } else {
            console.log('User cancelled login or did not fully authorize.');
        }
    });
}
(function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

function checkLoginState() {
  FB.getLoginStatus(function(response) {
    if (response.status == 'connected') {
      document.getElementById('image-container').innerHTML = '<span>Loading..</span><canvas id="canvas_lg" width="1200" height="628"></canvas><canvas id="canvas_sm" width="500" height="500"></canvas>';
      var canvas_lg = document.getElementById('canvas_lg');
      var canvas_sm = document.getElementById('canvas_sm');
      var ctx_lg = canvas_lg.getContext('2d');
      var ctx_sm = canvas_sm.getContext('2d');
      //select a number from 1 - 12
      var random_number = Math.floor(Math.random() * (12 - 1 + 1)) + 1;
      var base_img_name = 'p' + random_number + '.png';
      var base_img_lg = loadImage('images/lg/' + base_img_name, processImages);
      var base_img_sm = loadImage('images/pc/' + base_img_name, processImages);
      var fb_img = loadImage('https://graph.facebook.com/' + response.authResponse.userID + '/picture?type=large', processImages);
      var imagesLoaded = 0;
      //download image
      jQuery('#downloadcanvas').on('click', function(e) {
        e.preventDefault();
        canvas_sm.toBlob(function(blob) {
          saveAs(blob, 'mypic.png');
        }, 'image/png');
      });
    }
  });
}

function loadImage(src, callback) {
  var img = new Image();
  img.setAttribute('crossOrigin', 'anonymous');
  img.onload = callback;
  img.src = src;
  return img;
}

function processImages() {
  imagesLoaded += 1;

  if (imagesLoaded == 3) {
    //merge images, remove colors and set base image contrast to 50
    ctx_lg.drawImage(fb_img, 0, 0, 200, 200, 
                             275, 0, 650, 628);
    var imageData = ctx_lg.getImageData(275, 0, 650, 628);
    //imageData = removeColors(imageData);
    //imageData = contrastImage(imageData, 50);
    putImageData(ctx_lg, imageData, 275, 0, 0, 0, imageData.width, imageData.height);
    ctx_lg.drawImage(base_img_lg, 0, 0, 1200, 628, 
                                  0, 0, 1200, 628);

    ctx_sm.drawImage(fb_img, 0, 0, 500, 500);
    imageData = ctx_sm.getImageData(0, 0, 500, 500);
    //imageData = removeColors(imageData);
    //imageData = contrastImage(imageData, 50);
    putImageData(ctx_sm, imageData, 0, 0, 0, 0, imageData.width, imageData.height);
    ctx_sm.drawImage(base_img_sm, 0, 0, 1200, 1200, 
                                  0, 0, 500, 500);

    //save large image to remove server
    jQuery('#sharelink').attr('disabled', true);
    jQuery.support.cors = true;
    var dataURL = canvas_lg.toDataURL();
    var mypic = new Image();
    jQuery('#image-container span').hide();
    mypic.src = canvas_sm.toDataURL();
    mypic.width = '200';
    mypic.height = '200';
    document.getElementById('image-container').appendChild(mypic);
    jQuery.ajax({
      type: 'POST',
      url: appHost + '/fb/handle_image.php',
      data: {
        img: dataURL
      }
    })
    .done(function(data) {
      var ID = data.replace(/\.\/|\.png/g, '');
      var share_link = 'https://www.facebook.com/sharer/sharer.php?u=' + appHost + '/remix-it-player/';
      share_link = share_link + ID + '_' + base_img_name.replace('.png', '') + '/';
      jQuery('#sharelink').prop('disabled', false);
      jQuery('#sharelink').prop('href', share_link);
      jQuery('#sharelink').text('分享');
      jQuery('#sharelink').on('click', function() {
        window.open(share_link);
      });
    });
  }
}

function putImageData(ctx, imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight) {
  var data = imageData.data;
  var height = imageData.height;
  var width = imageData.width;
  dirtyX = dirtyX || 0;
  dirtyY = dirtyY || 0;
  dirtyWidth = dirtyWidth !== undefined ? dirtyWidth : width;
  dirtyHeight = dirtyHeight !== undefined ? dirtyHeight : height;
  var limitBottom = Math.min(dirtyHeight, height);
  var limitRight = Math.min(dirtyWidth, width);
  for (var y = dirtyY; y < limitBottom; y++) {
    for (var x = dirtyX; x < limitRight; x++) {
      var pos = y * width + x;
      ctx.fillStyle = 'rgba(' + data[pos * 4 + 0] +
                      ',' + data[pos * 4 + 1] +
                      ',' + data[pos * 4 + 2] +
                      ',' + data[pos * 4 + 3] / 255 + ')';
      ctx.fillRect(x + dx, y + dy, 1, 1);
    }
  }
}

function removeColors(imageData) {
  for (var y = 0; y < imageData.height; y++) {
    for (var x = 0; x < imageData.width; x++) {
      var i = y * 4 * imageData.width + x * 4;
      var avg = (imageData.data[i] +
                 imageData.data[i + 1] +
                 imageData.data[i + 2]) / 3;
      imageData.data[i] = avg;
      imageData.data[i + 1] = avg;
      imageData.data[i + 2] = avg;
    }
  }
  return imageData;
}

function contrastImage(imageData, contrast) {
  var data = imageData.data;
  var factor = 259 * (contrast + 255) / (255 * (259 - contrast));

  for (var i = 0; i < data.length; i += 4) {
    data[i] = factor * (data[i] - 128) + 128;
    data[i + 1] = factor * (data[i + 1] - 128) + 128;
    data[i + 2] = factor * (data[i + 2] - 128) + 128;
  }
  return imageData;
}

/*
<?php
header("Access-Control-Allow-Origin: *");
define('UPLOAD_DIR', './');
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
*/