Converting canvas to PDF crashes browser

Converting canvas to PDF crashes browser - javascript

I am using Fabric.js for working on a canvas. Once complete, I scale it up to the size required for upload since the workspace for the canvas has to fit on a screen and my actual uploaded file needs to be approx. 14,000 px in width and 8,750 px in height. If I create an image, it creates it in a few seconds without issue. When I try to create a PDF using jsPDF, it crashes.
This works for creating the image from a Fabric.js canvas:
var dataURL = canvas.toDataURL({
format: 'png',
multiplier: 20
})
document.write('<img src="' + dataURL + '"/>');
And this fails to create the PDF/crashes the browser:
var dataURL = canvas.toDataURL({
format: 'png',
multiplier: 20
})
var pdf = new jsPDF();
pdf.addImage(dataURL, 'PNG', 0, 0);
pdf.save("download.pdf");
}

Given your image dimensions, this is simply a too big task to be done on the client side.
As the above solution tried to point out, you need to to this on the server side, regardless of the technology you are using.

JQuery Code:
First you get active object of canvas the go throw
dataArray.push({
"objFlipX" : obj_Tshirt_canv.item(i).getFlipX(),
"objFlipY" : obj_Tshirt_canv.item(i).getFlipY(),
"objWidth" : obj_Tshirt_canv.item(i).getWidth(),
"bojHeight" : obj_Tshirt_canv.item(i).getHeight(),
"objOriginX" : obj_Tshirt_canv.item(i).getLeft(),
"objOriginY" : obj_Tshirt_canv.item(i).getTop(),
"objImgSrc" : obj_Tshirt_canv.item(i).getSrc(),
"objAngel" : obj_Tshirt_canv.item(i).getAngle(),
"objScalex" : obj_Tshirt_canv.item(i).getScaleX(),
"objScaley" : obj_Tshirt_canv.item(i).getScaleY(),
"objType" : 'image'
});
$.ajax({
url : " ",
type : "POST",
data : {
dataArray : dataArray
},
cache : false,
success : function(data) {
alert("data update successfully");
hideLoder();
},
error : function(xhr, status, error) {
alert("Not Successfull");
}
});
Now crate php file and create object of fpdf like
require ('fpdf.php');
$aaa = $_REQUEST['action'];
$aaa();
function createpdf() {
$size = Array(840, 990);
$data = $_REQUEST['dataArray'];
$width = 280;
$height = 330;
$_actualratioWid = 840 / $width;
$_actualratioHig = 990 / $height;
$fpdfObj = new FPDF("p", "pt", $size);
$fpdfObj -> AddPage();
foreach ($data as $key => $value) {
$x = $value[objOriginX] * $_actualratioWid;
$y = $value[objOriginY] * $_actualratioHig;
$height = $value[bojHeight] * $_actualratioHig;
$width = $value[objWidth] * $_actualratioHig;
$_flipx = ($value[objFlipX]);
$_flipy = ($value[objFlipY]);
$imgsrc = $value[objImgSrc];
$dataTppe = $value[objType];
$rotation = $value[objAngel];
$color=$value[objcol];
$randomString = MyStringr();
$_filename1 = $_SERVER["DOCUMENT_ROOT"] . "path" . $randomString . ".png";
if ($value[objType] === 'text' && $value[objval] != " ") {//new code to be imp
$image_src = $_SERVER["DOCUMENT_ROOT"] . " path". $randomString . ".png";
exec('convert -background transparent -depth 8 -size 500 -fill "' . $color .'" -pointsize 70 label:"' . $value[objval] .'" "'. $image_src.'"');
$fpdfObj -> Image($image_src, $x, $y);
} else {// work done
$imgsrc = str_replace(" path", $_SERVER["DOCUMENT_ROOT"], $imgsrc);
if ($_flipx == "false" && $_flipy == "false") {
$fpdfObj -> Image($imgsrc, $x, $y, $height, $width);
} else if ($_flipy == "true" && $_flipx == "false") {
exec(' convert "' . $value[objImgSrc] . '" -flip ' . $_filename1);
$fpdfObj -> Image($_filename1, $x, $y, $height, $width);
}
else if($_flipx== "true" && $_flipy=="false")
{ exec(' convert "' . $value[objImgSrc] . '" -flop ' . $_filename1);
$fpdfObj -> Image($_filename1, $x, $y, $height, $width);
}
}//end else
}//foreach
while (true)//generate random file name when cart is added by user in tool
{
$filename = uniqid('AddCart', true) . '.pdf';`enter code here`
if (!file_exists(sys_get_temp_dir() . $filename))
break;
}
$fpdfObj -> Output($_SERVER["DOCUMENT_ROOT"] . "path " . $filename);
}//end createpdf ()
function MyStringr()//return random file name
{
$characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
$randstring = '';
for ($i = 0; $i < 10; $i++) {
$randstring = $characters[rand(0, strlen($characters))];
}
return $randstring;
}

Related

How can I fix the Image horizontal reel scroll slideshow images being stacked vertically?

The images (logos) are for some reason showing up stacked vertically using this plugin: Image horizontal reel scroll slideshow
https://wordpress.org/support/plugin/image-horizontal-reel-scroll-slideshow
You can see the behavior near the bottom of this page where the sponsors are located: http://tinyurl.com/phu86z9
I've tried re-installing the plugin and changing the type setting. Nothing has fixed this problem.
This is the shortcode I'm using to insert into the page:
[ihrss-gallery type="WIDGET" w="940" h="170" speed="3" bgcolor="#FFFFFF" gap="5" random="NO"]
There's actually 4 or 5 logos (even though you'll see the same one repeated twice at first glance), the div cuts them off with overflow: hidden, so they're hidden right now.
If you look for this div:
<div style="position:relative;width:940px;height: 170px;overflow:hidden">
and increase the height to 500px in chrome developer tools, you'll see what I mean.
How can I fix this so that the images line up horizontally as they're supposed to? I would also accept an answer that points me to another plugin that provides the same functionality.

It seems plugin needed some modifications. Codes are below.
image-horizontal-reel-scroll-slideshow.js
/**
* Image horizontal reel scroll slideshow
* Copyright (C) 2011 - 2014 www.gopiplus.com
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
var copyspeed=IHRSS_SPEED
IHRSS_SLIDESRARRAY='<nobr><ul style="list-style:none">'+IHRSS_SLIDESRARRAY.join(IHRSS_IMGGAP)+'</ul></nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+IHRSS_SLIDESRARRAY+'</span>')
var actualwidth=''
var cross_slide, ns_slide
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=IHRSS_SLIDESRARRAY
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+IHRSS_PIXELGAP+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(IHRSS_SLIDESRARRAY)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+IHRSS_PIXELGAP
ns_slide2.document.write(IHRSS_SLIDESRARRAY)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+IHRSS_PIXELGAP+"px"
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+IHRSS_PIXELGAP+"px"
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+IHRSS_PIXELGAP
if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+IHRSS_PIXELGAP
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+IHRSS_WIDTH+';height:'+IHRSS_HEIGHT+';overflow:hidden">')
write('<div style="position:absolute;width:'+IHRSS_WIDTH+';height:'+IHRSS_HEIGHT+';background-color:'+IHRSS_BGCOLOR+'" onMouseover="copyspeed=0" onMouseout="copyspeed=IHRSS_SPEED">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+IHRSS_WIDTH+' height='+IHRSS_HEIGHT+' name="ns_slidemenu" bgColor='+IHRSS_BGCOLOR+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=IHRSS_SPEED"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=IHRSS_SPEED"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
i added ul tag inside nobr tag at line 20
image-horizontal-reel-scroll-slideshow.php
<?php
/*
Plugin Name: Image horizontal reel scroll slideshow
Plugin URI: http://www.gopiplus.com/work/2011/05/08/wordpress-plugin-image-horizontal-reel-scroll-slideshow/
Description: Image horizontal reel scroll slideshow lets showcase images in a horizontal move style. This slideshow will pause on mouse over. The speed of the plugin gallery is customizable.
Author: Gopi Ramasamy
Version: 11.6
Author URI: http://www.gopiplus.com/work/2011/05/08/wordpress-plugin-image-horizontal-reel-scroll-slideshow/
Donate link: http://www.gopiplus.com/work/2011/05/08/wordpress-plugin-image-horizontal-reel-scroll-slideshow/
Tags: Horizontal, Image, Reel, Scroll, Slideshow, Gallery
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
global $wpdb, $wp_version;
define("WP_Ihrss_TABLE", $wpdb->prefix . "Ihrss_plugin");
define("WP_Ihrss_UNIQUE_NAME", "Ihrss");
define('WP_Ihrss_FAV', 'http://www.gopiplus.com/work/2011/05/08/wordpress-plugin-image-horizontal-reel-scroll-slideshow/');
if ( ! defined( 'WP_IHRSS_BASENAME' ) )
define( 'WP_IHRSS_BASENAME', plugin_basename( __FILE__ ) );
if ( ! defined( 'WP_IHRSS_PLUGIN_NAME' ) )
define( 'WP_IHRSS_PLUGIN_NAME', trim( dirname( WP_IHRSS_BASENAME ), '/' ) );
if ( ! defined( 'WP_IHRSS_PLUGIN_URL' ) )
define( 'WP_IHRSS_PLUGIN_URL', WP_PLUGIN_URL . '/' . WP_IHRSS_PLUGIN_NAME );
if ( ! defined( 'WP_IHRSS_ADMIN_URL' ) )
define( 'WP_IHRSS_ADMIN_URL', get_option('siteurl') . '/wp-admin/options-general.php?page=image-horizontal-reel-scroll-slideshow' );
function Ihrss()
{
global $wpdb;
$Ihrss_package = "";
$Ihrss_title = get_option('Ihrss_title');
$Ihrss_sliderwidth = get_option('Ihrss_sliderwidth');
$Ihrss_sliderheight = get_option('Ihrss_sliderheight');
$Ihrss_slidespeed = get_option('Ihrss_slidespeed');
$Ihrss_slidebgcolor = get_option('Ihrss_slidebgcolor');
$Ihrss_slideshowgap = get_option('Ihrss_slideshowgap');
$Ihrss_random = get_option('Ihrss_random');
$Ihrss_type = get_option('Ihrss_type');
if(!is_numeric($Ihrss_sliderwidth)) { $Ihrss_sliderwidth = 500; }
if(!is_numeric($Ihrss_sliderheight)) { $Ihrss_sliderheight = 170; }
if(!is_numeric($Ihrss_slidespeed)) { $Ihrss_slidespeed = 1; }
if(!is_numeric($Ihrss_slideshowgap)) { $Ihrss_slideshowgap = 5; }
$Ihrss_slideshowgaphtml = "padding-right:".$Ihrss_slideshowgap."px;";
$sSql = "select Ihrss_path,Ihrss_link,Ihrss_target,Ihrss_title from ".WP_Ihrss_TABLE." where 1=1";
if($Ihrss_type <> ""){ $sSql = $sSql . " and Ihrss_type='".$Ihrss_type."'"; }
if($Ihrss_random == "YES"){ $sSql = $sSql . " ORDER BY RAND()"; }else{ $sSql = $sSql . " ORDER BY Ihrss_order"; }
$data = $wpdb->get_results($sSql);
$cnt = 0;
if ( ! empty($data) )
{
foreach ( $data as $data )
{
$Ihrss_path = trim($data->Ihrss_path);
$Ihrss_link = trim($data->Ihrss_link);
$Ihrss_target = trim($data->Ihrss_target);
$Ihrss_title = trim($data->Ihrss_title);
$Ihrss_package = $Ihrss_package ."IHRSS_SLIDESRARRAY[$cnt]='<li style=\"display:inline-block;\"><a style=\"$Ihrss_slideshowgaphtml\" title=\"$Ihrss_title\" target=\"$Ihrss_target\" href=\"$Ihrss_link\"><img alt=\"$Ihrss_title\" src=\"$Ihrss_path\" /></a></li>'; ";
$cnt++;
}
?>
<script language="JavaScript1.2">
var IHRSS_WIDTH = "<?php echo $Ihrss_sliderwidth."px"; ?>";
var IHRSS_HEIGHT = "<?php echo $Ihrss_sliderheight."px"; ?>";
var IHRSS_SPEED = <?php echo $Ihrss_slidespeed; ?>;
IHRSS_BGCOLOR = "<?php echo $Ihrss_slidebgcolor; ?>";
var IHRSS_SLIDESRARRAY=new Array();
var IHRSS_FINALSLIDE ='';
<?php echo $Ihrss_package; ?>
var IHRSS_IMGGAP = " ";
var IHRSS_PIXELGAP = 1;
</script>
<script language="JavaScript1.2" src="<?php echo WP_IHRSS_PLUGIN_URL; ?>/image-horizontal-reel-scroll-slideshow.js"></script>
<?php
}
else
{
_e('No images available in this Gallery Type. Please check admin setting.', 'ihrss');;
}
}
function Ihrss_install()
{
global $wpdb;
if($wpdb->get_var("show tables like '". WP_Ihrss_TABLE . "'") != WP_Ihrss_TABLE)
{
$sSql = "CREATE TABLE IF NOT EXISTS ". WP_Ihrss_TABLE . " (";
$sSql = $sSql . "Ihrss_id INT NOT NULL AUTO_INCREMENT ,";
$sSql = $sSql . "Ihrss_path TEXT CHARACTER SET utf8 COLLATE utf8_bin NOT NULL ,";
$sSql = $sSql . "Ihrss_link TEXT CHARACTER SET utf8 COLLATE utf8_bin NOT NULL ,";
$sSql = $sSql . "Ihrss_target VARCHAR( 50 ) NOT NULL ,";
$sSql = $sSql . "Ihrss_title VARCHAR( 500 ) NOT NULL ,";
$sSql = $sSql . "Ihrss_order INT NOT NULL ,";
$sSql = $sSql . "Ihrss_status VARCHAR( 10 ) NOT NULL ,";
$sSql = $sSql . "Ihrss_type VARCHAR( 100 ) NOT NULL ,";
$sSql = $sSql . "Ihrss_extra1 VARCHAR( 100 ) NOT NULL ,";
$sSql = $sSql . "Ihrss_extra2 VARCHAR( 100 ) NOT NULL ,";
$sSql = $sSql . "Ihrss_date datetime NOT NULL default '0000-00-00 00:00:00' ,";
$sSql = $sSql . "PRIMARY KEY ( Ihrss_id )";
$sSql = $sSql . ") ENGINE=MyISAM DEFAULT CHARSET=utf8;";
$wpdb->query($sSql);
$IsSql = "INSERT INTO `". WP_Ihrss_TABLE . "` (`Ihrss_path`, `Ihrss_link`, `Ihrss_target` , `Ihrss_title` , `Ihrss_order` , `Ihrss_status` , `Ihrss_type` , `Ihrss_date`)";
$sSql = $IsSql . " VALUES ('".get_option('siteurl')."/wp-content/plugins/image-horizontal-reel-scroll-slideshow/images/Sing_1.jpg', '#', '_blank', 'Image 1', '1', 'YES', 'GROUP1', '0000-00-00 00:00:00');";
$wpdb->query($sSql);
$sSql = $IsSql . " VALUES ('".get_option('siteurl')."/wp-content/plugins/image-horizontal-reel-scroll-slideshow/images/Sing_2.jpg' ,'#', '_blank', 'Image 2', '2', 'YES', 'GROUP1', '0000-00-00 00:00:00');";
$wpdb->query($sSql);
$sSql = $IsSql . " VALUES ('".get_option('siteurl')."/wp-content/plugins/image-horizontal-reel-scroll-slideshow/images/Sing_3.jpg', '#', '_blank', 'Image 3', '1', 'YES', 'Widget', '0000-00-00 00:00:00');";
$wpdb->query($sSql);
$sSql = $IsSql . " VALUES ('".get_option('siteurl')."/wp-content/plugins/image-horizontal-reel-scroll-slideshow/images/Sing_4.jpg', '#', '_blank', 'Image 4', '2', 'YES', 'Widget', '0000-00-00 00:00:00');";
$wpdb->query($sSql);
}
add_option('Ihrss_title', "Horizontal Slideshow");
add_option('Ihrss_sliderwidth', "400");
add_option('Ihrss_sliderheight', "75");
add_option('Ihrss_slidespeed', "1");
add_option('Ihrss_slidebgcolor', "#ffffff");
add_option('Ihrss_slideshowgap', "10");
add_option('Ihrss_random', "YES");
add_option('Ihrss_type', "Widget");
}
function Ihrss_control()
{
echo '<p><b>';
_e('Image horizontal reel scroll slideshow', 'ihrss');
echo '.</b> ';
_e('Check official website for more information', 'ihrss');
?> <a target="_blank" href="<?php echo WP_Ihrss_FAV; ?>"><?php _e('click here', 'ihrss'); ?></a></p><?php
}
function Ihrss_widget($args)
{
extract($args);
echo $before_widget . $before_title;
echo get_option('Ihrss_Title');
echo $after_title;
Ihrss();
echo $after_widget;
}
function Ihrss_admin_options()
{
global $wpdb;
$current_page = isset($_GET['ac']) ? $_GET['ac'] : '';
switch($current_page)
{
case 'edit':
include('pages/image-management-edit.php');
break;
case 'add':
include('pages/image-management-add.php');
break;
case 'set':
include('pages/image-setting.php');
break;
default:
include('pages/image-management-show.php');
break;
}
}
add_shortcode( 'ihrss-gallery', 'Ihrss_shortcode' );
function Ihrss_shortcode( $atts )
{
global $wpdb;
$Ihrss = "";
$Ihrss_package = "";
// New code
//[ihrss-gallery type="Widget" w="600" h="170" speed="1" bgcolor="#FFFFFF" gap="10" random="YES"]
if ( ! is_array( $atts ) ) { return ''; }
$Ihrss_type = $atts['type'];
$Ihrss_sliderwidth = $atts['w'];
$Ihrss_sliderheight = $atts['h'];
$Ihrss_slidespeed = $atts['speed'];
$Ihrss_slidebgcolor = $atts['bgcolor'];
$Ihrss_slideshowgap = $atts['gap'];
$Ihrss_random = $atts['random'];
if(!is_numeric($Ihrss_sliderwidth)) { $Ihrss_sliderwidth = 250 ;}
if(!is_numeric($Ihrss_sliderheight)) { $Ihrss_sliderheight = 200; }
if(!is_numeric($Ihrss_slidespeed)) { $Ihrss_slidespeed = 1; }
if(!is_numeric($Ihrss_slideshowgap)) { $Ihrss_slideshowgap = 5; }
$Ihrss_slideshowgaphtml = "padding-right:".$Ihrss_slideshowgap."px;";
$sSql = "select Ihrss_path,Ihrss_link,Ihrss_target,Ihrss_title from ".WP_Ihrss_TABLE." where 1=1";
if($Ihrss_type <> ""){ $sSql = $sSql . " and Ihrss_type='".$Ihrss_type."'"; }
if($Ihrss_random == "YES"){ $sSql = $sSql . " ORDER BY RAND()"; }else{ $sSql = $sSql . " ORDER BY Ihrss_order"; }
$data = $wpdb->get_results($sSql);
$cnt = 0;
if ( ! empty($data) )
{
foreach ( $data as $data )
{
$Ihrss_path = trim($data->Ihrss_path);
$Ihrss_link = trim($data->Ihrss_link);
$Ihrss_target = trim($data->Ihrss_target);
$Ihrss_title = trim($data->Ihrss_title);
$Ihrss_package = $Ihrss_package ."IHRSS_SLIDESRARRAY[$cnt]='<li style=\"display:inline-block;\"><a style=\"$Ihrss_slideshowgaphtml\" title=\"$Ihrss_title\" target=\"$Ihrss_target\" href=\"$Ihrss_link\"><img alt=\"$Ihrss_title\" src=\"$Ihrss_path\" /></a></li>'; ";
$cnt++;
}
$Ihrss_pluginurl = get_option('siteurl') . "/wp-content/plugins/image-horizontal-reel-scroll-slideshow/";
$Ihrss = $Ihrss .'<script language="JavaScript1.2">';
$Ihrss = $Ihrss .'var IHRSS_WIDTH = "'.$Ihrss_sliderwidth.'px"; ';
$Ihrss = $Ihrss .'var IHRSS_HEIGHT = "'.$Ihrss_sliderheight.'px"; ';
$Ihrss = $Ihrss .'var IHRSS_SPEED = '. $Ihrss_slidespeed.'; ';
$Ihrss = $Ihrss .'var IHRSS_BGCOLOR = "'.$Ihrss_slidebgcolor.'"; ';
$Ihrss = $Ihrss .'var IHRSS_SLIDESRARRAY=new Array(); ';
$Ihrss = $Ihrss .'var IHRSS_FINALSLIDE =" "; ';
$Ihrss = $Ihrss .$Ihrss_package;
$Ihrss = $Ihrss .'var IHRSS_IMGGAP = " "; ';
$Ihrss = $Ihrss .'var IHRSS_PIXELGAP = 1; ';
$Ihrss = $Ihrss .'</script>';
$Ihrss = $Ihrss .'<script language="JavaScript1.2" src="'.$Ihrss_pluginurl.'/image-horizontal-reel-scroll-slideshow.js"></script>';
}
else
{
$Ihrss = $Ihrss . __('No images available in this Gallery Type. Please check admin setting.', 'ihrss');
}
return $Ihrss;
}
function Ihrss_add_to_menu()
{
if (is_admin())
{
add_options_page(__('Image horizontal reel scroll slideshow', 'ihrss'),
__('Image horizontal reel scroll slideshow', 'ihrss'), 'manage_options', "image-horizontal-reel-scroll-slideshow", 'Ihrss_admin_options' );
}
}
function Ihrss_init()
{
if(function_exists('wp_register_sidebar_widget'))
{
wp_register_sidebar_widget('Image-horizontal-reel-scroll-slideshow', __('Image horizontal reel scroll slideshow', 'ihrss'), 'Ihrss_widget');
}
if(function_exists('wp_register_widget_control'))
{
wp_register_widget_control('Image-horizontal-reel-scroll-slideshow', array(__('Image horizontal reel scroll slideshow', 'ihrss'), 'widgets'), 'Ihrss_control');
}
}
function Ihrss_deactivation()
{
// No action required.
}
function Ihrss_textdomain()
{
load_plugin_textdomain( 'ihrss', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' );
}
add_action('plugins_loaded', 'Ihrss_textdomain');
add_action('admin_menu', 'Ihrss_add_to_menu');
add_action("plugins_loaded", "Ihrss_init");
register_activation_hook(__FILE__, 'Ihrss_install');
register_deactivation_hook(__FILE__, 'Ihrss_deactivation');
?>
i wrapped a tag with li tag at lines 67 and 219
I hope this will fix your issue. It worked well for me.

I try to modify
http://dev.lhpssa.org/wp-content/plugins/image-horizontal-reel-scroll-slideshow//image-horizontal-reel-scroll-slideshow.js
and combine with inline call
<script type="text/javascript">
var IHRSS_WIDTH = "940px";
var IHRSS_HEIGHT = "170px";
var IHRSS_SPEED = 3;
var IHRSS_BGCOLOR = "#FFFFFF";
var IHRSS_SLIDESRARRAY=new Array();
var IHRSS_FINALSLIDE =" ";
IHRSS_SLIDESRARRAY[0]='<a style="float:left;padding-right:5px;width25px;" title="Antique Reels" target="_blank" href="http://www.antiquereels.com/tomgreene/index.html"><img alt="Antique Reels" src="http://dev.lhpssa.org/wp-content/uploads/2013/07/customrodandreel.jpg" /></a>';
IHRSS_SLIDESRARRAY[1]='<a style="float:left;padding-right:5px;width25px;" title="Holy Cross Ortho" target="_blank" href="http://www.holy-cross.com/orthopaedics/kleinhenz.php"><img alt="Holy Cross Ortho" src="http://dev.lhpssa.org/wp-content/uploads/2013/07/holycrosshospital.jpg" /></a>';
IHRSS_SLIDESRARRAY[2]='<a style="float:left;padding-right:5px;width25px;" title="Holy Cross Hospital" target="_blank" href="http://www.holy-cross.com/orthopaedics/kleinhenz.php"><img alt="Holy Cross Hospital" src="http://dev.lhpssa.org/wp-content/uploads/2013/07/tracysands.jpg" /></a>';
IHRSS_SLIDESRARRAY[3]='<a style="float:left;padding-right:5px;width25px;" title="Re/Max" target="_blank" href="http://www.southfloridahouses.net"><img alt="Re/Max" src="http://dev.lhpssa.org/wp-content/uploads/2014/01/Screen-Shot-2014-01-09-at-4.05.50-PM.png" /></a>';
var IHRSS_IMGGAP = " ";
var IHRSS_PIXELGAP = 1;
var copyspeed=IHRSS_SPEED
IHRSS_SLIDESRARRAY=IHRSS_SLIDESRARRAY.join(IHRSS_IMGGAP)
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+IHRSS_SLIDESRARRAY+'</span>')
var actualwidth=''
var cross_slide, ns_slide
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=IHRSS_SLIDESRARRAY
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+IHRSS_PIXELGAP+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(IHRSS_SLIDESRARRAY)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+IHRSS_PIXELGAP
ns_slide2.document.write(IHRSS_SLIDESRARRAY)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+IHRSS_PIXELGAP+"px"
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+IHRSS_PIXELGAP+"px"
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+IHRSS_PIXELGAP
if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+IHRSS_PIXELGAP
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+IHRSS_WIDTH+';height:'+IHRSS_HEIGHT+';overflow:hidden">')
write('<div style="position:absolute;width:'+IHRSS_WIDTH+';height:'+IHRSS_HEIGHT+';background-color:'+IHRSS_BGCOLOR+'" onMouseover="copyspeed=0" onMouseout="copyspeed=IHRSS_SPEED">')
write('<div id="test2" style="float:left;position:absolute;left:0px;top:0px;width:1400px;"></div>')
write('<div id="test3" style="float:left;position:absolute;left:-1000px;top:0px;width:1400px;"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+IHRSS_WIDTH+' height='+IHRSS_HEIGHT+' name="ns_slidemenu" bgColor='+IHRSS_BGCOLOR+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=IHRSS_SPEED"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=IHRSS_SPEED"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>
Output:

php | Defend move_upload_file or delete files from input[type="file"] using jQuery

I have an input[type="file"] had multiple option. I made it preview function so that user can delete the image by clicking the button before submit. The images are deleted well on browser by remove() function however the problem is the values of input including the deleted images are posted when i submit. I don't know how to delete real value of input.
I've tried to figure it out to delete in the server side.
This is the part of html code.
<div class="col-xs-4 vcenter from-group">
<span class="glyphicon glyphicon-asterisk" style="color:red;"></span><label for="inputScreenshots">스크린샷</label>
<p style="display:inline; padding-left:270px; color:red; font-size: 12px">* 이미지 사이즈 : 800 X 450</p>
<input type="file" id="inputScreenshots" name="inputScreenshots[]" class="form-control" accept="image/*" multiple>
<div id="filenameList" style="width : 400px">
<div id="insertScreenshots" style="margin : 30px; position :relative;">
<input type="hidden" name="screenshots_filename[]" value="<?=$screenshot_urls?>">
</div>
</div>
This is the php code where im trying to defend uploading images.
$ss_upload="false";
if (isset($_POST["del_screenshots"])){
// del_screenshots are images that deleted from client.
$ds_count = $_POST["del_screenshots"];
foreach($ds_count as $del) {
echo "<br/> del_screenshots : ".$del;
}
}
$ss_count = sizeof($_FILES['inputScreenshots']['tmp_name']);
// ss_count is the size of all images including deleted images from input field.
echo "<br/>ss_cout : ". $ss_count;
for ($i = 0; $i < $ss_count; $i++) {
$tmpFilePath = $_FILES['inputScreenshots']['tmp_name'][$i];
$tmp_filename = $_FILES['inputScreenshots']['name'][$i];
// tmp_filename is the posted real file name.
echo "<br/> tmp_filename".$i. " : " .$tmp_filename;
//=========================================================================
for ($j = 0; $j < sizeof($ds_count); $j++) {
// Compare all images name and deleted images name
if (strcmp($ds_count[$j] , $tmp_filename) == 0) {
echo "<br/>".$ds_count[$j] . " == " . $tmp_filename . "==> " ."true";
// The $tmp_filename has to be deleted. not to be uploaded to server.
// $tmp_filename = null;
}else {
echo "<br/>".$ds_count[$j] . " == " . $tmp_filename . "==> " ."false";
// This files are okay to be uploaded to server.
}
}
//=========================================================================
$ext = pathinfo($tmp_filename, PATHINFO_EXTENSION);
// $ext = pathinfo($_FILES['inputScreenshots']['name'][$i], PATHINFO_EXTENSION);
echo "<br/>". $i . " ext (pathinfo) : ". $ext;
if ($ext == "") {
continue;
$ss_upload="false";
}
$newFilePath = uniqid().".".$ext;
if ($screenshots != "") {
$screenshots .= "+";
}
$screenshots .= $newFilePath;
// $screenshots has be uploaded to DB except the deleted images. (ex : uniqFileName.png + uniqFileName.png + .. )
echo "<br/> 1) screenshots : ". $screenshots;
move_uploaded_file($tmpFilePath, $SS_PATH."/".$newFilePath);
$ss_upload="true";
}
I want to defend uploading the deleted images but it is no matter to use unlink() in somewhere. The point is how cant i make the string except the deleted images.
=========================================================================
I suppose there is another way to do in jQuery but i have no idea.
I'll put the code below.
$("#inputScreenshots").change(function(){
$("#filenameList div.notyet").remove();
for(var i = 0, len = this.files.length; i < len; i++){
var file = this.files[i];
var fr = new FileReader();
fr.onload = screenshots_processFile(file);
fr.readAsDataURL(file);
}
});
var screenshots_processFile = function screenshots_processFile(file) {
return (function(file) {
return function(e) {
var div = document.createElement("div");
$(div).addClass("notyet").css({
margin: "30px",
position: "relative"
});
var html = [,'<img src="" width="100%" id="tmp_screenshots">'
,'<button type="button" class="close img-close" aria-label="Close"><span aria-hidden="true">×</span></button>'
].join("");
$(div).append(html);
$(div).find("button").click(function() {
alert("remove");
//=========================================================== * TODO : remove the files in server!
var targetDom = document.getElementById( "filenameList" );
var targetInput = document.createElement("input");
targetInput.setAttribute("name", "del_screenshots[]" );
targetInput.setAttribute("type","hidden");
targetDom.appendChild(targetInput);
alert(file.name);
targetInput.setAttribute("value", file.name);
//===========================================================
$(this).parent().remove();
});
$(div).find("img").attr("src", e.target.result);
$("#filenameList").append(div);
}
})(file)
};
How can i do this? Does anyone have an idea?
-----------------------------------------------------------------------------------------------------------
I solved it like this. I know my code is so dirty :-/
$ss_upload="false";
if (isset($_POST["del_screenshots"])){
$ds_count = $_POST["del_screenshots"];
foreach($ds_count as $del) {
echo "<br/> del_screenshots : ".$del;
}
//echo "<br/> << TEST >>"."<br/>ds_count[0] : " . $ds_count[0] . "<br/>ds_count[1] : " . $ds_count[1] ;
}
$ss_count = sizeof($_FILES['inputScreenshots']['tmp_name']);
echo "<br/>ss_cout : ". $ss_count;
for ($i = 0; $i < $ss_count; $i++) {
$tmpFilePath = $_FILES['inputScreenshots']['tmp_name'][$i];
$tmp_filename = $_FILES['inputScreenshots']['name'][$i];
echo "<br/> tmp_filename".$i. " : " .$tmp_filename;
$ss_del_mode="false";
//=========================================================================
if (isset($_POST["del_screenshots"])) {
for ($j = 0; $j < sizeof($ds_count); $j++) {
if (strcmp($ds_count[$j] , $tmp_filename) == 0) {
echo "<br/>".$ds_count[$j] . " == " . $tmp_filename . "==> " ."true";
$ss_del_mode = "true";
}
}
}
//=========================================================================
$ext = pathinfo($tmp_filename, PATHINFO_EXTENSION);
// $ext = pathinfo($_FILES['inputScreenshots']['name'][$i], PATHINFO_EXTENSION);
echo "<br/>". $i . " ext (pathinfo) : ". $ext;
if ($ext == "") {
continue;
$ss_upload="false";
}
if ($ss_del_mode == "true") {
echo "<br/> ss_del_mode [[[[ " . $ss_del_mode. " ]]]]";
$newFilePath = "";
} else {
$newFilePath = uniqid().".".$ext;
echo "<br/> ss_del_mode [[[[ " . $ss_del_mode. " ]]]]";
}
if ($screenshots != "") {
if ($ss_del_mode != "true"){
echo "<br/> ss_del_mode [[[[ " . $ss_del_mode. " ]]]]". " --> screenshots";
$screenshots .= "+";
}
}
$screenshots .= $newFilePath;
echo "<br/> 1) screenshots (newFilePath) : ". $screenshots;
if ($newFilePath != "") {
move_uploaded_file($tmpFilePath, $SS_PATH."/".$newFilePath);
}
$ss_upload="true";
}

Upload image with PHP and AngularJS

I am working on a admin panel which is going to add data on a SQLite DB using AngularJS and PHP and then show it in HTML. All good with data as arrays text date etc. The problem that I have is to upload an Image in a specified folder and store the path in my DB.
This is my PHP which store data in DB
<?php
try {
if (
empty($_POST['item']) ||
empty($_POST['description']) ||
empty($_POST['release']) ||
empty($_POST['demo']) ||
empty($_POST['type']) ||
empty($_POST['live']) ||
empty($_POST['client'])
) {
throw new PDOException("Invalid Request");
}
$item = $_POST['item'];
$description = $_POST['description'];
$release = $_POST['release'];
$demo = $_POST['demo'];
$type = $_POST['type'];
$live = $_POST['live'];
$client = $_POST['client'];
$objDb = new PDO('sqlite:../database/database');
$objDb->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = "INSERT INTO 'items'
('id', 'item', 'description', 'release', 'demo', 'type', 'live', 'client')
VALUES (null, ?, ?, ?, ?, ?, ?, ?)";
$statement = $objDb->prepare($sql);
if (!$statement->execute(array($item, $description, $release, $demo, $type, $live, $client))) {
throw new PDOException("The execute method failed");
}
And this is my PHP which upload Images in a specified folder
<?php
if (isset($_POST['submit'])) {
$validextensions = array("jpeg", "jpg", "png");
$temporary = explode(".", $_FILES["file"]["name"]);
$file_extension = end($temporary);
if ((($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/jpeg")
) && ($_FILES["file"]["size"] < 1000000)
&& in_array($file_extension, $validextensions)) {
if ($_FILES["file"]["error"] > 0) {
echo "Return Code: " . $_FILES["file"]["error"] . "<br/><br/>";
} else {
echo "<span>Your File Uploaded Succesfully...!!</span><br/>";
echo "<br/><b>File Name:</b> " . $_FILES["file"]["name"] . "<br>";
echo "<b>Type:</b> " . $_FILES["file"]["type"] . "<br>";
echo "<b>Size:</b> " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
echo "<b>Temp file:</b> " . $_FILES["file"]["tmp_name"] . "<br>";
if (file_exists("upload/" . $_FILES["file"]["name"])) {
echo $_FILES["file"]["name"] . " <b>already exists.</b> ";
} else {
move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $_FILES["file"]["name"]);
echo "<b>Stored in:</b> " . "upload/" . $_FILES["file"]["name"];
}
}
} else {
echo "<span>***Invalid file Size or Type***<span>";
}
}
?>
And this is my insert function from angular
$scope.insert = function() {
if ($scope.goodToGo()) {
var thisData = "item=" + $scope.item;
thisData += "&description=" + $scope.description;
thisData += "&release=" + $scope.release;
thisData += "&demo=" + $scope.demo;
thisData += "&client=" + $scope.client;
thisData += "&type=" + $scope.type;
thisData += "&live=" + $scope.live;
thisData += "&image=" + $scope.image;
$http({
method : 'POST',
url : urlInsert,
data : thisData,
headers : {'Content-Type' : 'application/x-www-form-urlencoded'}
})
.success(function(data){
if(_recordAddedSuccessfully(data)){
$scope.items.push({
id : data.item.id,
item : data.item.item,
description : data.item.description,
release : data.item.release,
demo : data.item.demo,
client : data.item.client,
client_name : data.item.client_name,
type : data.item.type,
type_name : data.item.type_name,
live : data.item.live,
live_name : data.item.live_name,
image : data.item.image,
done : data.item.done
});
$scope.clear();
}
})
.error(function(data, status, headers, config){
throw new Error('Something went wrong with inserting');
});
}
};
Have anyone any idea how to do this?

If you are uploading image then content type should be set to multipart/form-data i.e
headers : {'Content-Type' : 'multipart/form-data'}
rest looks fine.

Highcharts pie charts can have url links

I am using Highcharts pie charts in my application, where the data for pie chart is populating from database. My question is after populating pie chart, if i click certain area it should render to particular php page. Is it possible?
here is my code :
function open_risk_level_pie()
{
$chart = new Highchart();
$chart->chart->renderTo = "open_risk_level_pie";
$chart->chart->plotBackgroundColor = null;
$chart->chart->plotBorderWidth = null;
$chart->chart->plotShadow = false;
$chart->title->text = "Risk Level";
$chart->tooltip->formatter = new HighchartJsExpr("function() {
return '<b>'+ this.point.name +'</b>: '+ this.point.y; }");
$chart->plotOptions->pie->allowPointSelect = 1;
$chart->plotOptions->pie->cursor = "pointer";
$chart->plotOptions->pie->dataLabels->enabled = false;
$chart->plotOptions->pie->showInLegend = 1;
$chart->plotOptions->pie->colors = array('red', 'orange', 'yellow', 'black');
$chart->credits->enabled = false;
// Open the database connection
$db = db_open();
// Get the risk levels
$stmt = $db->prepare("SELECT * from `risk_levels`");
$stmt->execute();
$array = $stmt->fetchAll();
$high = $array[0][0];
$medium = $array[1][0];
$low = $array[2][0];
// Query the database
$stmt = $db->prepare("select a.calculated_risk, COUNT(*) AS num, CASE WHEN a.calculated_risk >= " . $high . " THEN 'High' WHEN a.calculated_risk < " . $high . " AND a.calculated_risk >= " . $medium . " THEN 'Medium' WHEN a.calculated_risk < " . $medium . " AND a.calculated_risk >= " . $low . " THEN 'Low' WHEN a.calculated_risk < " . $low . " AND a.calculated_risk >= 0 THEN 'Insignificant' END AS level from `risk_scoring` a JOIN `risks` b ON a.id = b.id WHERE b.status != \"Closed\" GROUP BY level ORDER BY a.calculated_risk DESC");
$stmt->execute();
// Store the list in the array
$array = $stmt->fetchAll();
// Close the database connection
db_close($db);
// If the array is empty
if (empty($array))
{
$data[] = array("No Data Available", 0);
}
// Otherwise
else
{
// Create the data array
foreach ($array as $row)
{
$data[] = array($row['level'], (int)$row['num']);
}
$chart->series[] = array('type' => "pie",
'name' => "Level",
'data' => $data);
}
echo "<div id=\"open_risk_level_pie\"></div>\n";
echo "<script type=\"text/javascript\">";
echo $chart->render("open_risk_level_pie");
echo "</script>\n";
}

There is an exmaple on the highcharts website showing something similar. You can use the point/events/click function to trigger a new page load:
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
location.href = this.options.url;
}
}
}
}
},
http://jsfiddle.net/w5Lx4/
Note, in this example, the URL is added to the series data:
data: [{
y: 29.9,
url: 'http://bing.com/search?q=foo'
}, {
You could replace this with generating a URL based on the point y value.

Security of javascript image upload and view

As a js-firsttimer, wanna ask if script below is proper (security), considering that filetype is detected and processed via php.
http://jsfiddle.net/kwCks/2/
var _URL = window.URL || window.webkitURL;
$("#file").change(function(e) {
var file, img, size;
if ((file = this.files[0])) {
if(file.size < "5100000"){
size = "good";
img = new Image();
img.onload = function() {
if((this.height/(this.width / 64)) < "200"){
if(size == "good"){
//alert("ok to upload");
$("#blah").attr("src", img.src);
}
}else{ alert("File is too big (dimensions)");}
};
img.src = _URL.createObjectURL(file);
} else {
size = "big";
alert("File is too big, use 5MB or smaller");
}
}
});
EDIT PHP PART
if(isset($_POST["titletext"])){
echo $_POST["titletext"];
if (!$_FILES["avafile"]["error"] > 0) {
echo "Upload: " . $_FILES["avafile"]["name"] . "<br>";
echo "Type: " . $_FILES["avafile"]["type"] . "<br>";
echo "Size: " . ($_FILES["avafile"]["size"] / 1024) . " kB<br>";
echo "Temp file: " . $_FILES["avafile"]["tmp_name"] . "<br>";
move_uploaded_file($_FILES["avafile"]["tmp_name"], "upload/" . md5($_FILES["avafile"]["name"]));
echo '<img class="img-rounded" style="width: 64px;" src="./upload/'.$_FILES["avafile"]["name"].'">';
}
}
Also wanna now if there's a way to detect script/text uploaded as image and use some "striptags" for it.
Images are being uploaded with md5(something) name.

We Keep Coding

JavaScript is the programming language of the Web.

Converting canvas to PDF crashes browser - javascript

Given your image dimensions, this is simply a too big task to be done on the client side. As the above solution tried to point out, you need to to this on the server side, regardless of the technology you are using.

Related

How can I fix the Image horizontal reel scroll slideshow images being stacked vertically?

php | Defend move_upload_file or delete files from input[type="file"] using jQuery

Upload image with PHP and AngularJS

Highcharts pie charts can have url links

Security of javascript image upload and view

Categories

Resources