joeey1984

Hello, indeed you are right. That code only previews the image. However that is not what I am looking for. I would like the image to be resized before uploaded to server. Here is the correct code. If you can show me how to implement it, it would be much appreciated.

ImageUploader.prototype.scaleImage = function(img, completionCallback) {
var canvas = document.createElement(‘canvas’);
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext(‘2d’).drawImage(img, 0, 0, canvas.width, canvas.height);

while (canvas.width >= (2 * this.config.maxWidth)) {
canvas = this.getHalfScaleCanvas(canvas);
}

if (canvas.width > this.config.maxWidth) {
canvas = this.scaleCanvasWithAlgorithm(canvas);
}

var imageData = canvas.toDataURL(‘image/jpeg’, this.config.quality);
this.performUpload(imageData, completionCallback);
};

ImageUploader.prototype.scaleCanvasWithAlgorithm = function(canvas) {
var scaledCanvas = document.createElement(‘canvas’);

var scale = this.config.maxWidth / canvas.width;

scaledCanvas.width = canvas.width * scale;
scaledCanvas.height = canvas.height * scale;

var srcImgData = canvas.getContext(‘2d’).getImageData(0, 0, canvas.width, canvas.height);
var destImgData = scaledCanvas.getContext(‘2d’).createImageData(scaledCanvas.width, scaledCanvas.height);

this.applyBilinearInterpolation(srcImgData, destImgData, scale);

scaledCanvas.getContext(‘2d’).putImageData(destImgData, 0, 0);

return scaledCanvas;
};

ImageUploader.prototype.getHalfScaleCanvas = function(canvas) {
var halfCanvas = document.createElement(‘canvas’);
halfCanvas.width = canvas.width / 2;
halfCanvas.height = canvas.height / 2;

halfCanvas.getContext(‘2d’).drawImage(canvas, 0, 0, halfCanvas.width, halfCanvas.height);

return halfCanvas;
};

ImageUploader.prototype.applyBilinearInterpolation = function(srcCanvasData, destCanvasData, scale) {
function inner(f00, f10, f01, f11, x, y) {
var un_x = 1.0 – x;
var un_y = 1.0 – y;
return (f00 * un_x * un_y + f10 * x * un_y + f01 * un_x * y + f11 * x * y);
}
var i, j;
var iyv, iy0, iy1, ixv, ix0, ix1;
var idxD, idxS00, idxS10, idxS01, idxS11;
var dx, dy;
var r, g, b, a;
for (i = 0; i < destCanvasData.height; ++i) {
iyv = i / scale;
iy0 = Math.floor(iyv);
// Math.ceil can go over bounds
iy1 = (Math.ceil(iyv) > (srcCanvasData.height – 1) ? (srcCanvasData.height – 1) : Math.ceil(iyv));
for (j = 0; j < destCanvasData.width; ++j) {
ixv = j / scale;
ix0 = Math.floor(ixv);
// Math.ceil can go over bounds
ix1 = (Math.ceil(ixv) > (srcCanvasData.width – 1) ? (srcCanvasData.width – 1) : Math.ceil(ixv));
idxD = (j + destCanvasData.width * i) * 4;
// matrix to vector indices
idxS00 = (ix0 + srcCanvasData.width * iy0) * 4;
idxS10 = (ix1 + srcCanvasData.width * iy0) * 4;
idxS01 = (ix0 + srcCanvasData.width * iy1) * 4;
idxS11 = (ix1 + srcCanvasData.width * iy1) * 4;
// overall coordinates to unit square
dx = ixv – ix0;
dy = iyv – iy0;
// I let the r, g, b, a on purpose for debugging
r = inner(srcCanvasData.data[idxS00], srcCanvasData.data[idxS10], srcCanvasData.data[idxS01], srcCanvasData.data[idxS11], dx, dy);
destCanvasData.data[idxD] = r;

g = inner(srcCanvasData.data[idxS00 + 1], srcCanvasData.data[idxS10 + 1], srcCanvasData.data[idxS01 + 1], srcCanvasData.data[idxS11 + 1], dx, dy);
destCanvasData.data[idxD + 1] = g;

b = inner(srcCanvasData.data[idxS00 + 2], srcCanvasData.data[idxS10 + 2], srcCanvasData.data[idxS01 + 2], srcCanvasData.data[idxS11 + 2], dx, dy);
destCanvasData.data[idxD + 2] = b;

a = inner(srcCanvasData.data[idxS00 + 3], srcCanvasData.data[idxS10 + 3], srcCanvasData.data[idxS01 + 3], srcCanvasData.data[idxS11 + 3], dx, dy);
destCanvasData.data[idxD + 3] = a;
}
}
};

Here is the link to the code:
https://stackoverflow.com/questions/10333971/html5-pre-resize-images-before-uploading?lq=1

Hello again, I tired the codes. Everything is fine except when the image container remains blank and preview is clicked , the add photo button comes up and you can post a blank page again.

Meanwhile regarding the image click play. I found this code and modified it. Basically what it does is it looks for [bpfb_video\] video tag and converts to youtube’s specific thumb. There are two downfalls, one is that the code is only for youtube, and two the the code only works when the youtube link along with [bpfb_video\] tag is posted on the activity page as text . For example,

This on the activity page:

[bpfb_video]https://www.youtube.com/watch?v=f1GJF9ocdj4g[/bpfb_video]

And this somewhere in the plugin

jQuery(document).ready(function(a){var b=/\[bpfb_video\]https?:\/\/(?:www\.)?youtu(?:be\.com|\.be)\/(?:watch\?v=|v\/)?([A-Za-z0-9_\-]+)([a-zA-Z&=;_+0-9*#\-]*?)\[\/bpfb_video\]/;
var c='<div data-address=”$1″ class=”youtube” style=”background: url(https://i4.ytimg.com/vi/$1/hqdefault.jpg)”><span></span></div>’;var d='<iframe data-address=”$1″ class=”youtube” src=”https://www.youtube.com/embed/$1?enablejsapi=1&hd=1&autohide=1&autoplay=1&#8243; frameborder=”0″ allowfullscreen></iframe>’;a(“.activity-inner”).each(function(){var d=a(this);d.html(d.html().replace(b,c))});a(“.activity-inner”).delegate(“div.youtube”,”click”,function(){var b=a(this);b.replaceWith(d.replace(/\$1/g,b.attr(“data-address”)))})})

Thank you for your prompt reply.

Have a great day.