Для получения полного доступа
зарегистрируйтесь.
RSS

Все сниппеты с тэгом «image»



dfatt
  • Репутация: 260
  • Сниппеты: 53
  • Ревизии: 7

Быстрый способ добавить цветовой оверлей на фоновое изображение

.block_business {
    background: linear-gradient(
            rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.7)
    ),
    url('https://images.unsplash.com/photo-1524758631624-e2822e304c36');
}

Результат:

Gravatar image
blacksmoke26
  • Репутация: 13
  • Сниппеты: 11
  • Ревизии: 0
/**
 * Check that given file is an image file.
 * @param string $filename The file path to be checked
 * @return bool TRUE when image file | FALSE when none
 */
function isImageFile ( string $filename ) {
	if ( !is_file ( $filename) || !is_readable ( $filename) ) {
		return false;
	} else if ( class_exists('\finfo') ) {
		$mime = (new \finfo(FILEINFO_MIME))->file ( $filename);
		return strpos((string)$mime, 'image') !== false;
	} else if ( function_exists('getimagesize') ) {
		$size = @getimagesize ( $filename);
		return !@is_array($size) ? false : true;
	} else if ( function_exists('exif_imagetype') && exif_imagetype ( $filename) === false ) {
		return false;
	} else if ( function_exists('mime_content_type') ) {
		$mime = @mime_content_type ($filename);
		return strpos((string)$mime, 'image') !== false;
	} else {
		return true;
	}
}

/************
 * EXAMPLE
 ***********/
// Can validate all sort of images
var_dump ( isImageFile('image.jpg') );

/***********
 * OUTPUT
 **********/
# (bool) true
Gravatar image
blacksmoke26
  • Репутация: 13
  • Сниппеты: 11
  • Ревизии: 0
/**
 * Create image file from base64 image data
 * @param string $filename Path to the file where to write the data.
 * @param string $data The base64 image data
 * @return bool True when created | False anyway
 */
function imgBase64ToFile ( string $filename, string $data ) {
	list(, $data) = explode(';', $data);
	list(, $data) = explode(',', $data);
	$data = base64_decode($data);
	return file_put_contents($filename, $data) !== false;
}

/************
 * EXAMPLE
 ***********/
$base64Data = <<<BASE64
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAGrUlEQVR42uzceWwUdRjGcUSg3BVo5FQqIEVb1KgQkFCQy6hEiSCCSggqlyJRYzgMEm8iJpXDGNGImphIUJZCKGqqoCbcRiERUS6jqK1SkbMFgb5+/9g/Jj9mdjql2233fZ/kk5C2bJp3nu3MzvxmGoiIUUz9ALRTPwDt1A9AO/UD0E79ALRTPwDt1A9AO/UD0E79ALRTPwDt1A9AO/UD0E79ALRTPwDt1A9AO/UD0E79ALRTPwDt1A9AO/UD0E79ALRTPwDt1A9AO/UD0E79ALRTPwDt1A9AO/UD0E79ALRTPwDt1A9AO/UD0E79ALRTPwDt1A9AO/UD0E79ALRTPwDt1A9AO/UD0E79ALRTPwDtkvridSQZaIeuyEUfDMQQjAD4N19DH+SiK9ohA6mOFaAKaYxsDMV0FCCGrdiPMpSjEhKiEhUowwFsw2q8jscwHN3QxAqQugJchoGYhVX4GeWQWlKBvYhhDgahjRUguQXojimI4U9IHVOCNZiOq60AqIF0wGQUoxxST1RgA6ahkxUgevpgGQ5DatBbmO9RgPOQJPoH76KfFSA8A1GISkgNO46W8OYGSC1ah1utABfmGqyAJNFOXAJvHoekwCr0tgLw8Q3P4AQkyT6Em/cgKVKO55ChtQA5+BpSS56Cm28hKbYZudoKcDv+htSioT6fMM5C6oAjuFtLAR6IMPgXMRpj/Hi+NwFzEcMRiKMcXeBNps9rjcVDmI81OApxfFrF32k8ZuId7IOEOI+H0r0AYyIc4Z9FZ0RNFyyFeOzGpYiabKyEeExG1DTHZPwLCfFguhbgJpyCVNHBizzfPgsStxLVTSPshMQNQHXTD8cgCZzBLelWgOb4ARJBEdx0wwCPPrgSQdkIwVy46YE8jxy0hl/mQHAMl/tclxjg0Q85Ccr7NCTEPrROpwLMg0T0EtwUQRyn8CV6wc14CO7w2WilEFRCcA6HMApuJkDwnc+5hCkBu689GAc37XEcEuLldClAO5RBIhoNb5rgICRAMdzkoRzdfXZHEiAGNzMg+ABu3oIEOI0ucPMdJMQxdEiHAjwMieg8rvG5GvgfJMAfaAZvemIXmsKbiSHXC9y8CcETcLMZksCQwF1TuBnpUIAYJKJDPhtzJCSB/Wjsc1EpBjeLIQGmJtjIt/rsSsIuWPW/iBNQ6+t7ARrhJ0hExXASehzxGdzch4Vw81WEDZaJf3EGnUJ2Ja4TaA9vWqEUUgW/IKM+FyATf0Eieg1uVkESeBJuCjAR3rRECcTHUWTBmxsh+BENQ3Ylrg1w0y/iGcIsjQW4H56E/iUp83mnNcYuXA9veic4GfUtiO9GXhFpVwKM8itl1AJo3AW4Gy07wcKNk7gLbiahzOcAcBwkwPtwswiC2XCzCRKgAG464ggkyi5A20FgKVrBm3yUoiTuV2zHIuQGDPowNsLNQkiAmQmO2G+DNy3wPUrifscP+Agj4ZePIRGs1/gx8Gu4yUBmXGs0D1kxvAmCBXDzOSTAIJ+N/BfOoSu8aYhMj5bga4FZAIlohsYTQUtQ3eRhByRuLLxpht8S7Eo6+ryeYD8aoTpp7XeySM2JoHiehVTRJERJI/TGqzjhnI69At50xbkIB4D3QLAaUdMFU7EHUg2vpNO1gBbYDamCm+FNWxRgiccbWI512BOwUU9jmfP/CkOuPi52fn4rBPPhZqbzs0uxDJ9gR8j5fnUXgwgbNnxtfxnawJvBkBRzP2U0xWFIEpzBgHRdEHJvyIKQLQHvNEmhs+gBb3JwDpIEE9J9SdiEBEvC3q5TK3eBg8jwOzaoYZV4RMui0DsD/oROrYMrd4vg5oUkLAodpW1ZeC98A/G4Ed5k4igkhebDzVpIDdmCPM03hszDSQg2odhjCyTFdqPYcbKGbgx5Hhl2a1iDBtdiJUSJGK6zW8MuTD7WoBKShoowxG4ODU9fvI0ySD13BMvR324Pj56OmIovUAGpJ05jIx5FZ3tARM2kB6ahECWQOqYUa/EoetojYpL/kKh8zEYMe1FRy+/wfSjEXAxGW3tIlKMW0wRXYTgew+tYjW04gDJURDi4rMA/OIjtKMQizMAIdEeGPSau/jwoMgvZyENf5GMYRsQNQ378e3nIRhaa2oMijT0q1lgBjBXAWAGMFcBYAYwVwFgBjBXAWAGMFcBYAYwVwFgBjBXAWAGMFcBYAYwVwFgBjBXAWAGMFcBYAYwVwFgBjBXAWAGMFcBYAYwVwFgBjBXAWAH+b5cOCQAAAAAE/X/tChuBByAAAiAAAiAAAiAAAjAL4Vh9E/WkOccAAAAASUVORK5CYII=
BASE64;

imgBase64ToFile('image.png', $base64Data);
FullZero
  • Репутация: 7
  • Сниппеты: 6
  • Ревизии: 0

Иногда при выгрузке товаров в json к товару может быть массив картинок,одна картинка или вообще небыть изображения используя функцию можно либо вернуть спец.картинку вместо отсутствующего изображения либо первую из массива

let obj,
arr= ['image1.jpg','image2.jpg'],
str ="image.jpg";

function is_array(a){
	return (typeof a ==='undefined')? 'noimage.jpg':((typeof a == "object") && (a instanceof Array)) ? a[0] : a;
}
console.log(is_array(obj))
console.log(is_array(arr));
console.log(is_array(str));
jestonedev
  • Репутация: 99
  • Сниппеты: 11
  • Ревизии: 1

Этим скриптом можно получить изображение из буфера обмена при нажатии ctrl+v на js. Работает только в хроме и мозиле. Может кто обращал внимание, в вк, в переписке есть возможность прикрепления картинки в диалог прямо из буфера, с этим скриптом вы можете реализовать то же самое.

// проверяем, поддерживает ли браузер объект Clipboard
// если нет создаем элемент с атрибутом contenteditable
if (!window.Clipboard) {
   var pasteCatcher = document.createElement("div");
    
   // Firefox вставляет все изображения в элементы с contenteditable
   pasteCatcher.setAttribute("contenteditable", "");
    
   pasteCatcher.style.position = "absolute";
   pasteCatcher.style.left = "-3000px";
   document.body.appendChild(pasteCatcher);
 
   // элемент должен быть в фокусе
   pasteCatcher.focus();
   document.addEventListener("click", function() { pasteCatcher.focus(); });
} 
// добавляем обработчик событию
window.addEventListener("paste", pasteHandler);
 
function pasteHandler(e) {
// если поддерживается event.clipboardData (Chrome)
      if (e.clipboardData && e.clipboardData.items) {
      // получаем все содержимое буфера
      var items = e.clipboardData.items;
      if (items) {
         // находим изображение
         for (var i = 0; i < items.length; i++) {
            if (items[i].type.indexOf("image") !== -1) {
               // представляем изображение в виде файла
               var blob = items[i].getAsFile();
               // создаем временный урл объекта
               var URLObj = window.URL || window.webkitURL;
               var source = URLObj.createObjectURL(blob);                
               // добавляем картинку в DOM
               createImage(source);
            }
         }
      }
   // для Firefox проверяем элемент с атрибутом contenteditable
   } else {      
      setTimeout(checkInput, 1);
   }
}
 
function checkInput() {
    var child = pasteCatcher.childNodes[0];   
   pasteCatcher.innerHTML = "";    
   if (child) {
// если пользователь вставил изображение – создаем изображение
      if (child.tagName === "IMG") {
         createImage(child.src);
      }
   }
}
 
function createImage(source) {
   var pastedImage = new Image();
   pastedImage.onload = function() {
      // теперь у нас есть изображение из буфера
   }
   pastedImage.src = source;
}

Valentin Sayik
  • Репутация: 37
  • Сниппеты: 5
  • Ревизии: 0

Этим скриптом можно получить изображение из буфера обмена при нажатии ctrl+v на js. Работает только в хроме и мозиле. Может кто обращал внимание, в вк, в переписке есть возможность прикрепления картинки в диалог прямо из буфера, с этим скриптом вы можете реализовать то же самое.

// проверяем, поддерживает ли браузер объект Clipboard
// если нет создаем элемент с атрибутом contenteditable
if (!window.Clipboard) {
   var pasteCatcher = document.createElement("div");
    
   // Firefox вставляет все изображения в элементы с contenteditable
   pasteCatcher.setAttribute("contenteditable", "");
    
   pasteCatcher.style.display = "none";
   document.body.appendChild(pasteCatcher);
 
   // элемент должен быть в фокусе
   pasteCatcher.focus();
   document.addEventListener("click", function() { pasteCatcher.focus(); });
} 
// добавляем обработчик событию
window.addEventListener("paste", pasteHandler);
 
function pasteHandler(e) {
// если поддерживается event.clipboardData (Chrome)
      if (e.clipboardData) {
      // получаем все содержимое буфера
      var items = e.clipboardData.items;
      if (items) {
         // находим изображение
         for (var i = 0; i < items.length; i++) {
            if (items[i].type.indexOf("image") !== -1) {
               // представляем изображение в виде файла
               var blob = items[i].getAsFile();
               // создаем временный урл объекта
               var URLObj = window.URL || window.webkitURL;
               var source = URLObj.createObjectURL(blob);                
               // добавляем картинку в DOM
               createImage(source);
            }
         }
      }
   // для Firefox проверяем элемент с атрибутом contenteditable
   } else {      
      setTimeout(checkInput, 1);
   }
}
 
function checkInput() {
    var child = pasteCatcher.childNodes[0];   
   pasteCatcher.innerHTML = "";    
   if (child) {
// если пользователь вставил изображение – создаем изображение
      if (child.tagName === "IMG") {
         createImage(child.src);
      }
   }
}
 
function createImage(source) {
   var pastedImage = new Image();
   pastedImage.onload = function() {
      // теперь у нас есть изображение из буфера
   }
   pastedImage.src = source;
}